popstate
イベント ハンドラーを試すことができます。例:
注: 最良の結(jié)果を得るには、他の予期しない問題を避けるために、ロジックを?qū)g裝する特定のページにのみこのコードをロードする必要があります。
popstate イベントは、現(xiàn)在の履歴エントリが変更される (ユーザーが新しい狀態(tài)に移動(dòng)する) たびに発生します。ユーザーがブラウザの「戻る/進(jìn)む」ボタンをクリックするか、history.back()
、history.forward()
、history.go()
を?qū)g行すると、これが発生します。 > メソッドがプログラムで呼び出されたとき。
event.state
はイベントの屬性であり、履歴狀態(tài)オブジェクトと同じです。
jQuery 構(gòu)文の場(chǎng)合は、ラップします (ドキュメントの準(zhǔn)備ができたら偶數(shù)リスナーを追加します):
リーリー參照: ページ読み込み時(shí)の window.onpopstate
「シングル ページ アプリケーションと HTML5 PushState のサンプル ページ」も參照してください。: リーリー
これは、Chrome 5、Firefox 4、IE 10、Safari 6、Opera 11.5 および同様のバージョンと互換性があるはずです。(注: Sharky のフィードバックに基づいて、バックスペース キーを検出するコードを追加しました)
したがって、SO でこれらの質(zhì)問をよく目にしますが、最近、私自身が戻るボタンの機(jī)能を制御する際に問題に遭遇しました。自分のアプリケーション (ハッシュ ナビゲーションを備えた単一ページ) に最適なソリューションを何日も探した結(jié)果、戻るボタンを検出するためのシンプルでクロスブラウザーのライブラリ不要のシステムを思いつきました。
ほとんどの人は次の使用を推奨します:
リーリーただし、この関數(shù)は、ユーザーが位置ハッシュを変更するページ內(nèi)要素を使用するときにも呼び出されます。ユーザーがクリックしてページが前後に移動(dòng)する場(chǎng)合、これは最高のユーザー エクスペリエンスではありません。
私のシステムの概要を説明するために、ユーザーがインターフェイス內(nèi)を移動(dòng)するときに、前のハッシュ値を配列に入力します。次のようになります:
リーリーとてもシンプルです。これは、クロスブラウザのサポートと古いブラウザのサポートを確実にするために行われます。新しいハッシュ値を関數(shù)に渡すだけで関數(shù)がそれを保存し、ハッシュ値を変更します (そしてブラウザーの履歴に保存されます)。
また、lasthash
配列を使用してユーザーをページ間を移動(dòng)するページ內(nèi)の戻るボタンも利用しました。次のようになります:
つまり、これにより、ユーザーは最後のハッシュに戻り、配列から最後のハッシュが削除されます (現(xiàn)在、進(jìn)むボタンはありません)。
###それで。ユーザーがページ內(nèi)の戻るボタンまたはブラウザのボタンを使用したかどうかを検出するにはどうすればよいですか?最初に
window.onbeforeunload を調(diào)べましたが、役に立ちませんでした。これは、ユーザーがページを変更したい場(chǎng)合にのみ呼び出されます。これは、ハッシュ ナビゲーションを使用する?yún)g一ページ アプリケーションでは発生しません。
.onMouseDown は click で常に呼び出されるとは限らず、 onclick に追加しても十分な速さでトリガーされません。
documents と
windows の違いについて調(diào)査し始めました。私の最終的な解決策は、
document.onmouseover を使用してフラグを設(shè)定し、
document.onmouseleave を使用してフラグを無効にすることでした。
true に設(shè)定されます。マウスがドキュメント領(lǐng)域から離れると、ブール値は
false に変わります。
window.onhashchange を次のように変更できます:
リーリー
#未定義のチェックが表示されます。これは、配列內(nèi)に利用可能な履歴がない場(chǎng)合、
unknown が返されるためです。これを使用して、
window.onbeforeunload イベントを使用してユーザーに終了するかどうかを?qū)い亭蓼埂?
リーリー
これがあなたが望むものです。ハッシュ ナビゲーションの観點(diǎn)から、戻るボタンの使用とページ內(nèi)要素を検出するためのシンプルな 3 つの部分からなるアプローチ。###編集:###
ユーザーが Back イベントをトリガーするために Backspace キーを使用しないようにするには、次の內(nèi)容を含めることもできます (この質(zhì)問についてはに感謝します
):リーリー