[解決済み] Chromeでページ読み込み時にPopstateが発生する。
質問
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でテストしてみました。動作するようです。
関連
-
[解決済み] Chromeの同一生成元ポリシーを無効にする
-
[解決済み] ウェブサイト制作のためのChromeキャッシュの無効化
-
[解決済み] CSSは常にJavascriptより優先されるべきか?
-
[解決済み] ページロード後にJavaScriptを実行させるには?
-
[解決済み] Reactで要素を表示・非表示にする
-
[解決済み] chromedriverでSeleniumを使用していることをWebサイトで検出することは可能ですか?
-
[解決済み】自己署名付きlocalhost証明書をChromeが受け入れるようにする方法
-
[解決済み] ブラウザがファイルのダウンロードを受信したことを検出する
-
[解決済み] モバイルWeb HTML5フレームワークの選び方【終了しました
-
[解決済み] JavaScriptでの大文字小文字を区別しない正規表現
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] チェックボックスが選択されているかどうかを確認するjQuery
-
[解決済み] なぜJavaScriptでは!{}[true]がtrueに評価されるのですか?
-
[解決済み] Google maps API V3 - 同一地点に複数のマーカーを設置する。
-
[解決済み] bootstrap のポップオーバーがすべての要素の上に表示されない
-
[解決済み] オブジェクトの配列からReactコンポーネントをレンダリングする
-
[解決済み] JavaScriptでの大文字小文字を区別しない正規表現
-
[解決済み] JavaScript のオブジェクトの配列を比較し、最小値/最大値を取得する
-
[解決済み] ECMAScriptとは?
-
[解決済み] モデルフェッチ時に1をtrueに、0をfalseに変換する方法