1. ホーム
  2. javascript

[解決済み] Chromeでページ読み込み時にPopstateが発生する。

2023-02-16 21:04:46

質問

WebアプリケーションでHistory APIを使用していますが、1つの問題があります。 ページ上のいくつかの結果を更新するためにAjaxコールを行い、その際に history.pushState() を使用して、ページを再読み込みせずにブラウザのロケーションバーを更新しています。それから、もちろん、私は window.popstate を使って、戻るボタンがクリックされたときに以前の状態を復元するようにしています。

この問題はよく知られており、Chrome や Firefox は popstate イベントを異なる方法で扱います。Firefox は最初の読み込み時にイベントを発生させませんが、Chrome は発生させます。私はFirefoxスタイルにしたいのですが、ロード時に全く同じもので結果が更新されるだけなので、ロード時にイベントを起動しないようにしたいです。この問題を解決するために 履歴.js ? というのも、それだけで多くのJSライブラリが必要で、すでにJSが多すぎるCMSに実装する必要があるため、入れるJSを最小限にしたいからです。

そこで、Chromeで以下のようなものを起動しないようにする方法はないでしょうか? popstate を起動しないようにする方法があるのか、あるいは、おそらく誰かが History.js をすべてのライブラリを 1 つのファイルにまとめて使用しようとしたのだと思います。

どのように解決するのですか?

Google Chromeのバージョン19では、@spliterからの解決策は機能しなくなりました。johnnymire が指摘したように、Chrome 19 の history.state は存在しますが、null です。

私の回避策は window.history.state !== null を追加して、window.historyにstateが存在するかどうかをチェックすることです。

var popped = ('state' in window.history && window.history.state !== null), initialURL = location.href;

主要なブラウザと、Chromeのバージョン19と18でテストしてみました。動作するようです。