web-dev-qa-db-ja.com

history.pushStateとhistory.replaceStateがいつ使用されるかを検出する方法は？

履歴状態が変更されたときにサブスクライブできるイベントはありますか？どうやって？

javascripthtml5browser-historypushstate
39
BrunoLM

Onpopstateイベントは、履歴が変更されたときに発生する必要があります。コードで次のようにバインドできます。

window.onpopstate = function (event) {
  // do stuff here
}

このイベントは、ページがロードされたときにも発生する場合があります。イベントがページのロードから発生したかどうかを判断できます。ページの読み込み

window.onpopstate = function (event) {
  if (event.state) {
    // history changed because of pushState/replaceState
  } else {
    // history changed because of a page load
  }
}

現在、残念ながらonpushstateイベントはありません。これを回避するには、pushStateメソッドとreplaceStateメソッドの両方をラップして、独自のonpushstateイベントを実装する必要があります。

私は、pushStateでの作業を少し簡単にするライブラリを持っています。 Davis.js と呼ばれる、それをチェックする価値があるかもしれません。

25
Oliver Nightingale

pushStateとreplaceStateが呼び出されたときに通知を受けるためにも使用していました。

// Add this:
var _wr = function(type) {
    var orig = history[type];
    return function() {
        var rv = orig.apply(this, arguments);
        var e = new Event(type);
        e.arguments = arguments;
        window.dispatchEvent(e);
        return rv;
    };
};
history.pushState = _wr('pushState'), history.replaceState = _wr('replaceState');

// Use it like this:
window.addEventListener('replaceState', function(e) {
    console.warn('THEY DID IT AGAIN!');
});

しかし、通常はやり過ぎです。また、すべてのブラウザで機能するとは限りません。 （私は自分のブラウザのバージョンだけを気にします。）

NB。 Googleでも機能しませんChrome=サイトのJS環境を変更することは許可されていないため、Chrome $ ====拡張コンテンツスクリプトです。 <script>上記のコードで、しかしそれはさらにやり過ぎです。

22
Rudie