亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

ブラウザの戻るボタン イベントを検出する方法 - クロスブラウザ
P粉141911244
P粉141911244 2023-08-23 16:23:49
0
2
841
<p>ユーザーがブラウザで戻るボタンを押したかどうかを明示的に検出するにはどうすればよいですか? </p> <p><code>#URL</code> システムを使用して、シングルページ Web アプリケーションでページ內(nèi)の戻るボタンの使用を強(qiáng)制するにはどうすればよいですか? </p> <p>ブラウザの戻るボタンが獨(dú)自のイベントをトリガーしないのはなぜですか? ? </p>
P粉141911244
P粉141911244

全員に返信(2)
P粉662614213

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 および同様のバージョンと互換性があるはずです。

P粉949190972

(注: 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一ページ アプリケーションでは発生しません。

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

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

そのとき、私は

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

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

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

このようにして、

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

#未定義のチェックが表示されます。これは、配列內(nèi)に利用可能な履歴がない場(chǎng)合、unknown が返されるためです。これを使用して、window.onbeforeunload イベントを使用してユーザーに終了するかどうかを?qū)い亭蓼埂?

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

リーリー

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

###編集:###

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

に感謝します

):

リーリー

最新のダウンロード
詳細(xì)>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート