7

私は単純な Web ページを持っています。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>History hacks</title>
<script>
window.onpopstate = function (e) {
    alert("location: " + document.location + ", state: " + JSON.stringify(e.state));
}
window.onload = function (e) {
    alert('page loaded');
}
</script>
</head>
<body>
<p> <a href="http://www.yahoo.com">Yahoo</a> <a href="#part1">Part 1</a></p>
</body>
</html>

現在、Chrome と Firefox がイベントをトリガーする方法には多くの違いがあります(IE のテストに取り掛かったときpopstateに、自分が何に直面しているのかを考えると身震いします)。popstate これら 2 つのリンクのいずれかをクリックし、[戻る] ボタンを押してもう一度クリックします。Firefox は、ハッシュ部分を変更するリンクのイベントをトリガーし (ハッシュ リンクが同じ場合は初回のみ)、Yahoo リンクをクリックしてから [戻る] ボタンをクリックしても、まったくトリガーしません。

Firefox で、ユーザーが別のドメインのまったく別のサイトからクリックして戻ってきたことを確認する方法はありますか? Firefox でこの目的のために機能する別のイベントはありますか? (yahoo.com から戻ったときも load イベントはトリガーされません。)

4

4 に答える 4

11

popstate戻る (または進む) ボタンを使用して最初のページの読み込みに移動したときにイベントを取得するには、次のreplaceState()ように使用します。

window.onload = function(e) {
  history.replaceState(null, null, document.URL);
}

ページの読み込み時に Chrome が生成するイニシャルを無視するには、 /をpopstate呼び出すたびに状態にタグを付けることができます。pushStatereplaceState

history.pushState({myTag: true}, null, url);

次に、popstateハンドラーは次のようにフィルタリングしますmyTag

window.onpopstate = function(e) { 
  if (!e.state.myTag) return; // none of my business
  // code to handle popstate 
}

これら 2 つを組み合わせて、簡単なクロスブラウザー ソリューションを作成できます。

window.onpopstate = function(e) { 
  if (!e.state.myTag) return; // none of my business
  // code to handle popstate 
}

window.onload = function(e) {
  history.replaceState({myTag: true}, null, document.URL);
}

@Boris Zbarsky が bfcache について詳しく説明しています。それを私のアプローチとどのように組み合わせるかは考えていません。ページハンドラーを追加して無効にするだけですunload

window.onunload = function(e) { }
于 2012-10-12T21:14:34.653 に答える
2

pageshowページ キャッシュにキャッシュされた場合でも、戻ったときにページが表示されたときに通知を受け取りたい場合は、おそらくイベントを探しています。

load イベントがない場合は、ページが別の場所に移動したときとまったく同じ DOM とスクリプト実行環境が残っていることも意味することに注意してください。基本的には、ナビゲートではなく、ユーザーがしばらくの間タブを切り替えたかのようです。

それで、その状況でまだイベントを取得したいですか？ユーザーがページを含むタブに戻ったときに、探しているイベントを取得しますか?

于 2012-10-11T19:37:04.200 に答える
0

同じ質問があり、仕様を掘り下げて、別のドメインのページから戻るために戻るボタンを使用したときに、どのブラウザーでも popstate イベントが発生しない理由を理解する必要がありました。ドキュメントの状態変更が true ではないため、この場合 popstate は起動されるべきではなく、状態変更が true の場合にのみ popstate が起動されます。状態が true に設定されるように変更された場合、仕様は次のように述べています。

指定されたエントリの Document に最新のエントリがあり、そのエントリが指定されたエントリでない場合、state changed を true にします。それ以外の場合は false にします。

私の理解では、別のドメインのページからページに戻ると、ドキュメントが変更され、新しいドキュメントにはまだ最新のエントリがないため、ページには最新のエントリがありません。再び仕様から：

ブラウジング コンテキスト内の各ドキュメントは、最新のエントリを持つこともできます。これは、ブラウジング コンテキストのセッション履歴が最後にトラバースされた Document のエントリです。ドキュメントが作成されると、最初は最新のエントリがありません。

ただし、履歴の pushState または replaceState メソッドを使用してページの history.state にフラグを設定し、ページの読み込み時に history.state にこのフラグが存在するかどうかを確認することで、ユーザーがページに戻ってきたかどうかを確認する方法はまだあります。

詳細については、WHATWG の HTML 仕様の popstate イベントを扱う部分を参照してください: https://html.spec.whatwg.org/multipage/browsers.html#history-traversal

于 2015-11-07T11:07:28.493 に答える
0

アンロードする前に、ページをリロードして (初期ステータスを取得するため)、新しい href を設定します

window.onunload = function(e) {
  location.reload();
  location.href = **new_url** ;
}

Firefox はページの最後の状態を保存し、再作成する代わりに復元するため、これを行う必要があります。

于 2014-10-14T08:58:25.947 に答える