web-dev-qa-db-ja.com

window.history.pushStateとフォールバックを使用したクロスブラウザーjquery ajax履歴

ブラウザー間でjQueryとAJAX=を使用してナビゲーション履歴を実装したいと思います。私のアプローチは、window.history.pushStateを使用し、/#!/urlをサポートしないブラウザーでハッシュURL window.history.pushStateにフォールバックすることです。

例えば：

<a href="/home">home</a>
<a href="/about">about</a>
<a href="/contact">contact</a>

window.history.pushStateをサポートするブラウザーでは、これらのリンクのいずれかをクリックすると、ページを更新せずにアドレスが http://domain.com/home 、 httpに変更されます。 //domain.com/about など。ブラウザがwindow.history.pushStateをサポートしていない場合は、フラグメント識別子を使用する必要があります。つまり、 http://domain.com/#!/home 、 http://domain.com/#!/about 。

更新：ここでのフィードバックに基づいて、 Ajax SEO （ git ）を実装しました jQueryアドレス 古いブラウザが/#!/urlにフォールバックするHTML5 History APIの場合。

jqueryajaxbrowser-history
31
Binyamin
// Assuming the path is retreived and stored in a variable 'path'

if (typeof(window.history.pushState) == 'function') {
    window.history.pushState(null, path, path);
} else {
    window.location.hash = '#!' + path;
}
22
Ben Lee

フォールバックハッシュURLで使用してきたもの：

History = History || {};
History.pathname = null;
History.previousHash = null;
History.hashCheckInterval = -1;
History.stack = [];
History.initialize = function () {
    if (History.supportsHistoryPushState()) {
        History.pathname = document.location.pathname;
        $(window).bind("popstate", History.onHistoryChanged);
    } else {
        History.hashCheckInterval = setInterval(History.onCheckHash, 200);
    }
};
History.supportsHistoryPushState = function () {
    return ("pushState" in window.history) && window.history.pushState !== null;
};
History.onCheckHash = function () {
    if (document.location.hash !== History.previousHash) {
        History.navigateToPath(document.location.hash.slice(1));
        History.previousHash = document.location.hash;
    }
};
History.pushState = function (url) {
    if (History.supportsHistoryPushState()) {
        window.history.pushState("", "", url);
    } else {
        History.previousHash = url;
        document.location.hash = url;
    }
    History.stack.Push(url);
};
History.onHistoryChanged = function (event) {
    if (History.supportsHistoryPushState()) {
        if(History.pathname != document.location.pathname){
            History.pathname = null;
            History.navigateToPath(document.location.pathname);
        }
    }
};
History.navigateToPath = function(pathname) {
    History.pushState(pathname);

    // DO SOME HANDLING OF YOUR PATH HERE

};

あなたはあなたのクリックイベントをこれにバインドすることができます：

$(function(){
    $("a").click(function(){
        var href = $(this).attr('href');
        History.navigateToPath( href )
        return false;
    });
});

この例についてさらに説明が必要な場合は、喜んで聞いていただけます。

[〜＃〜]編集[〜＃〜]

私の他の答えを見てください。

6
Koen.

元の回答 から久しぶりに Backbone を使用することをお勧めします。

実装は次のようになります。

_// First setup a router which will be the responder for URL changes:
var AppRouter = Backbone.Router.extend({

  routes: {
    "*path": "load_content"
  },

  load_content: function(path){
    $('#content').load('/' + path);
  }

});
var appRouter = new AppRouter;

// Then initialize Backbone's history
Backbone.history.start({pushState: true});
_

ドキュメントからの抜粋：

アプリケーションでHTML5 pushStateサポートを使用することを示すには、Backbone.history.start({pushState: true})を使用します。 pushStateを使用したいが、ネイティブでサポートしていないブラウザで全ページの更新を使用する場合は、オプションに_{hashChange: false}_を追加できます。

そして、今、_Backbone.history.navigate_が呼び出されるたびに、AppRouterは、_#content_ divへのパスのAJAXロードを実行します。

AJAXですべてのリンクを処理するには、以下を使用できます。

_$("a").on('click', function(event){
    event.preventDefault();
    Backbone.history.navigate( event.currentTarget.pathname, {trigger: true} )
});
_

ルーターのハンドラーが呼び出される_{trigger: true}_に注意してください（それ以外の場合は、URLの変更からのみ）。

コード例をいじる： http://jsfiddle.net/koenpunt/pkAz7/1/

4
Koen.