39

で遊んでいwindow.onpopstateますが、少し気になることがあります。

ブラウザーは、ページの読み込み時に popstate イベントを異なる方法で処理する傾向があります。Chrome と Safari は、ページの読み込み時に常に popstate イベントを発行しますが、Firefox は発行しません。

ソース

私はそれをテストしましたが、Chrome と Safari 5.1 以降ではページの読み込み時に popstate イベントが発生しましたが、Firefox や IE10 では発生しませんでした。

問題は、ユーザーが戻るボタンまたは進むpopstateボタンをクリックした (または履歴が JavaScript によって変更された) イベントのみをリッスンしたいが、ページロードでは何もしたくないということです。

言い換えれば、ページ読み込みpopstateのイベントを他のイベントと区別したいのです。popstate

これは私がこれまでに試したことです（私はjQueryを使用しています）：

$(function() {
  console.log('document ready');

  setTimeout(function() {
    window.onpopstate = function(event) {
      // Do something here
    }, 10);
});

基本的に、ページの読み込み時にバインドされないように、後でlistener関数をバインドしようとします。popstate

これはうまくいくようですが、私はこの解決策が好きではありません。つまり、 setTimeout に選択されたタイムアウトが十分に大きいが、大きすぎないことをどのように確認できますか(あまり待たせたくないため)。

よりスマートな解決策があることを願っています！

4

4 に答える 4

7

同様の問題があり、ページが完全に読み込まれたかどうかを確認するために検証する必要がありました。

私はこのようなものを使用しました:

var page_loaded = false;    
window.onpopstate = function(event){
    if(!page_loaded){
       page_loaded = true;
       return false;
     }
    //Continue With Your Code
}
于 2013-04-09T08:27:28.183 に答える
5

イベントに反応するにはpopstate、何らかの状態をセッション履歴にプッシュする必要があります。

たとえば、次の行をドキュメント準備セクションに追加します。

history.pushState(null, null, window.location.pathname);

理想的ではありませんが、Chrome、Firefox、およびその他のブラウザーでも機能します。

次に、ユーザーが [戻る]または[進む] ボタンをクリックしたときhistory.back()、および , history.forward(),history.go()メソッドが手動で呼び出されたときに、イベントが正しく発生します。が呼び出されるたびにpopstate、別の状態を再度プッシュして機能させる必要があります。

以下も参照してください。

于 2016-05-10T15:40:47.620 に答える