javascript - すべてのブラウザでwindow.onpopstateを処理する理想的な方法は何ですか？

Question

Chromeの場合、イベントはページの読み込み時に発生しますが、Firefoxでは、戻るボタンまたは進むボタンを押した場合にのみ、イベントが正しく発生します。では、すべてのブラウザで正常に機能するスクリプトを作成するにはどうすればよいでしょうか。

Answer 1

私はこれでブラウザの検出に行きます（実際、私はそうしました）。jqueryの.data（）を使用して、テストするブールフラグを設定しています。

// chrome fires a popstack event on page load, so do a check before proceeding
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if( is_chrome && !$('body').data('allow-popstate-action') ) {
    $('body').data('allow-popstate-action', true);
    return false;
}

popstateイベントにバインドされている関数にこの条件節を追加したので、Chrome（ページ読み込み中）で初めて呼び出されると、何もせずに関数を終了します。次回（前へ/戻るボタン）、正常に動作します。

このプロジェクトでは古いバージョンのjQueryを使用しているため、jQuery.browser.webkitを使用できませんでしたが、おそらく使用できます。

Answer 2

もう少し洗練された方法は、popstateリスナーを追加する前に1msのタイムアウトを追加することです。非同期コードが実行される前に最初のpopstateが起動するため、popstate関数は正しく機能します（転送/戻るアクションでのみ）。

window.setTimeout(function(){
    $(window).on('popstate', function(event){
        // do things
    });
}, 1);