45

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

4

2 に答える 2

39

私はこれを使用して、いつ呼び出されたか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!');
});

普通にやり過ぎですけどね。また、すべてのブラウザーで機能するとは限りません。（ブラウザのバージョンだけが気になります。）

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

于 2014-09-04T19:52:01.813 に答える
10

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

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

このイベントは、ページの読み込み時にも発生する可能性があります。イベントがページの読み込みから発生したかどうかを判断できます。または、状態プロパティのイベント オブジェクトをチェックして pushState/replaceState を使用することにより、イベントが発生した場合は未定義になります。ページの読み込み

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と呼ばれるチェックアウトする価値があるかもしれません。これは、pushStateに基づいてルーティングを操作するための単純な API を提供します。

于 2011-02-27T17:35:47.360 に答える