ブラウザの戻るボタン イベントを検出する方法 - クロスブラウザ

Question

ユーザーがブラウザで戻るボタンを押したかどうかを明示的に検出するにはどうすればよいですか?

#URL システムを使用して、シングルページ Web アプリケーションでページ内の戻るボタンの使用を強制するにはどうすればよいですか?

ブラウザの戻るボタンが独自のイベントをトリガーしないのはなぜですか? ?

Answer 1

popstate イベント ハンドラーを試すことができます。例:

リーリー

^{注: 最良の結果を得るには、他の予期しない問題を避けるために、ロジックを実装する特定のページにのみこのコードをロードする必要があります。}

popstate イベントは、現在の履歴エントリが変更される (ユーザーが新しい状態に移動する) たびに発生します。ユーザーがブラウザの「戻る/進む」ボタンをクリックするか、history.back()、history.forward()、history.go() を実行すると、これが発生します。 > メソッドがプログラムで呼び出されたとき。

event.state はイベントの属性であり、履歴状態オブジェクトと同じです。

jQuery 構文の場合は、ラップします (ドキュメントの準備ができたら偶数リスナーを追加します):

リーリー

参照: ページ読み込み時の window.onpopstate

---

「シングル ページ アプリケーションと HTML5 PushState のサンプル ページ」も参照してください。: リーリー

これは、Chrome 5、Firefox 4、IE 10、Safari 6、Opera 11.5 および同様のバージョンと互換性があるはずです。

Answer 2

(注: Sharky のフィードバックに基づいて、バックスペース キーを検出するコードを追加しました)

したがって、SO でこれらの質問をよく目にしますが、最近、私自身が戻るボタンの機能を制御する際に問題に遭遇しました。自分のアプリケーション (ハッシュ ナビゲーションを備えた単一ページ) に最適なソリューションを何日も探した結果、戻るボタンを検出するためのシンプルでクロスブラウザーのライブラリ不要のシステムを思いつきました。

ほとんどの人は次の使用を推奨します:

リーリー

ただし、この関数は、ユーザーが位置ハッシュを変更するページ内要素を使用するときにも呼び出されます。ユーザーがクリックしてページが前後に移動する場合、これは最高のユーザー エクスペリエンスではありません。

私のシステムの概要を説明するために、ユーザーがインターフェイス内を移動するときに、前のハッシュ値を配列に入力します。次のようになります:

リーリー

とてもシンプルです。これは、クロスブラウザのサポートと古いブラウザのサポートを確実にするために行われます。新しいハッシュ値を関数に渡すだけで関数がそれを保存し、ハッシュ値を変更します (そしてブラウザーの履歴に保存されます)。

また、lasthash 配列を使用してユーザーをページ間を移動するページ内の戻るボタンも利用しました。次のようになります:

リーリー

つまり、これにより、ユーザーは最後のハッシュに戻り、配列から最後のハッシュが削除されます (現在、進むボタンはありません)。

＃＃＃それで。ユーザーがページ内の戻るボタンまたはブラウザのボタンを使用したかどうかを検出するにはどうすればよいですか?

最初に

window.onbeforeunload を調べましたが、役に立ちませんでした。これは、ユーザーがページを変更したい場合にのみ呼び出されます。これは、ハッシュ ナビゲーションを使用する単一ページ アプリケーションでは発生しません。

そこで、さらに詳しく調べてみると、フラグ変数を設定してみるという提案が見つかりました。私の場合、問題は、設定しようとしましたが、すべてが非同期であるため、ハッシュ変更の if ステートメントに必ずしも設定が間に合うとは限らないということでした。

.onMouseDown は click で常に呼び出されるとは限らず、 onclick に追加しても十分な速さでトリガーされません。

そのとき、私は

documents と windows の違いについて調査し始めました。私の最終的な解決策は、document.onmouseover を使用してフラグを設定し、document.onmouseleave を使用してフラグを無効にすることでした。

ユーザーのマウスがドキュメント領域内 (ブラウザ フレームではなくレンダリングされたページ) 内にある場合、ブール値は

true に設定されます。マウスがドキュメント領域から離れると、ブール値は false に変わります。

このようにして、

window.onhashchange を次のように変更できます: リーリー

#未定義のチェックが表示されます。これは、配列内に利用可能な履歴がない場合、unknown が返されるためです。これを使用して、window.onbeforeunload イベントを使用してユーザーに終了するかどうかを尋ねます。

つまり、履歴を保存するためにページ内の戻るボタンや配列を必ずしも使用しない人向けに簡単に説明します。

リーリー

これがあなたが望むものです。ハッシュ ナビゲーションの観点から、戻るボタンの使用とページ内要素を検出するためのシンプルな 3 つの部分からなるアプローチ。

＃＃＃編集：＃＃＃

ユーザーが Back イベントをトリガーするために Backspace キーを使用しないようにするには、次の内容を含めることもできます (この質問については

に感謝します

):

リーリー