1. ホーム
  2. javascript

[解決済み] history.pushStateで履歴の変更を通知してもらうには?

2022-04-14 15:27:05

質問

では、HTML5で導入された history.pushState を使用してブラウザの履歴を変更できるため、ウェブサイトはURLのフラグメント識別子を変更する代わりに、Ajaxと組み合わせてこれを使用するようになります。

悲しいことに、このことは、これらの呼び出しを onhashchange .

質問です。 WebサイトがMySQLを使用していることを検出する信頼できる方法(ハック? history.pushState ? 仕様書には、発生するイベントについては何も書かれていません(少なくとも私は何も見つけられませんでした)。

ファサードを作ろうと思って window.history を自作のJavaScriptオブジェクトに置き換えたが、全く効果がなかった。

さらに説明します。 私は、これらの変更を検出し、それに応じて行動する必要があるFirefoxアドオンを開発しています。

数日前にも似たような質問がありました。 DOMイベント しかし、これらのイベントはさまざまな理由で発生する可能性があるため、私はそれを当てにしたくありません。

更新してください。

jsfiddleはこちらです。 (Firefox 4 または Chrome 8 を使用) を示しています。 onpopstate はトリガーされません。 pushState が呼び出されます (それとも私が何か間違ったことをしているのでしょうか? 自由に改善してください!)。

アップデート2。

もう一つの(サイド)問題は window.location を使用した場合、更新されません。 pushState (しかし、私はこのことについてSOですでに読んだと思います)。

解決方法は?

<ブロッククオート

5.5.9.1 イベント定義

は、以下の通りです。 ポップステート イベントは、セッション履歴のエントリに移動する際に、特定のケースで発生します。

これによると、Popstateを使用した場合に、Popstateが発生する理由はない。 pushState . しかし、次のようなイベントは pushstate が便利でしょう。なぜなら history はホストオブジェクトなので、扱いに注意が必要ですが、この場合、Firefoxはいいみたいです。このコードで問題なく動きます。

(function(history){
    var pushState = history.pushState;
    history.pushState = function(state) {
        if (typeof history.onpushstate == "function") {
            history.onpushstate({state: state});
        }
        // ... whatever else you want to do
        // maybe call onhashchange e.handler
        return pushState.apply(history, arguments);
    };
})(window.history);

あなたのjsfiddle になる :

window.onpopstate = history.onpushstate = function(e) { ... }

モンキーパッチができる window.history.replaceState を、同じように使ってください。

注:もちろん onpushstate をグローバルオブジェクトに追加するだけで、さらに多くのイベントを処理させることができます。 add/removeListener