ブラウザがすぐに popstate イベントを発火しない場合に [戻る] ボタンを処理する方法 質問する

ブラウザがすぐに popstate イベントを発火しない場合に [戻る] ボタンを処理する方法 質問する

この質問は奇妙に聞こえるかもしれません。なぜなら、ほとんどの場合、popstate はユーザーが戻るボタンを押すと同期して起動されるからです。

しかし、W3Cの仕様では、UA(ブラウザ)がpopstateをキューに入れることが許可されているとされている。歴史を辿る(項目 14 を参照)、つまり、popstate(この時点で URL が変更されている場合でも) 非同期的に実行されます。

ブラウザベンダーは、この仕様をそれぞれ異なる方法で解釈し、実装します。Mozillaが決定Firefox は、遅い画像が をブロックしないように、popstateの前に起動できる必要があります。loadpopstate

Chrome/Safari は別の判断を下し、次のような問題が発生します。

DOMContentLoadedWeb アプリの履歴を管理する場合、多くの場合、ではなくなど、できるだけ早く履歴管理を開始することが望ましいですloadしかしその代わりに、までpushStateすべてがキューに入れられるため、ユーザーはいずれの からも取り消すことができません。popstateload

このようなシナリオに対処する方法についてアドバイスを求めています。私自身もいくつか思いつきました:

  • 画像は遅延ロードされるため、loadすぐに起動できます。
  • が起動されるまで UI をブロックしますload
  • loadの代わりにフレームワークを初期化しますDOMContentLoaded

もっと良い解決策はあるでしょうか?

アップデート: 前に実行される Ajax がある場合load、状況は悪化します。これらのリクエストによって DOM が変更され、DOM の変更に画像が含まれていると、loadそれらの画像がロードされるかタイムアウトするまで遅延され、popstateさらに長い時間キューに入れられることになります。

アップデート2: 簡単なデモを追加するには、こちらにアクセスしてくださいjsbin ページchrome では、が起動されるpopstateまでブロックされますload。キャッシュされた画像とキャッシュされていない画像の結果を比較できます。

ベストアンサー1

前のページのアンロード中に popstate を呼び出してみませんか。たとえば、ページ 1 にいてページ 2 に移動したい場合、ページ 2 のロード/準備中に pop state を呼び出すのではなく、ページ 1 のアンロード イベントで pop state を呼び出してみませんか。

それがあなたのシナリオを満たすかどうかはわかりません。しかし、あなたのビンで試すことができませんでした。

おすすめ記事