[解決済み] 位置情報ハッシュの変化を検出するにはどうすればよいですか?
質問
ナビゲーションにAjaxとhashを使用しています。
をチェックする方法はありますか?
window.location.hash
はこのように変更されましたか?
http://example.com/blah #123 まで http://example.com/blah #456
ドキュメント読み込み時にチェックすると動作するのですが。
しかし、#hashベースのナビゲーションがあると、ブラウザの戻るボタンを押したときに機能しません(つまり、blah#456からblah#123にジャンプします)。
アドレスボックスの中に表示されるのですが、JavaScriptでキャッチできないのです。
解決方法は?
これを本当に行う唯一の方法(そして 'reallysimplehistory' がこれを行う方法)は、現在のハッシュをチェックし続ける間隔を設定し、以前と比較することです。これを行い、購読者に、ハッシュが変更された場合に発行する変更イベントを購読させるのです。
この回答を新鮮に保つために更新しました。
もしあなたがjQueryを使っているのなら(今日、ほとんどの人にとって基礎になるはずです)、jQueryのイベントシステムを使ってwindowオブジェクトのhashchangeイベントをリスンすることで、素晴らしい解決策を得ることができます。
$(window).on('hashchange', function() {
//.. work ..
});
ここで素晴らしいのは、hashchangeのサポートについて心配する必要のないコードを書けることです。しかし、あまり知られていないjQueryの機能という形で、いくつかの魔法をかける必要があります。 jQueryの特別なイベント .
この機能により、誰かが何らかの方法でそのイベントを使おうとしたときに、そのイベントに対するセットアップコードを実行することができます (イベントへのバインディングなど)。
このセットアップ コードでは、ブラウザのネイティブ サポートをチェックし、ブラウザがネイティブに実装していない場合は、変更をポーリングするタイマーを 1 つ設定して、jQuery イベントをトリガーすることができます。
これは、このサポート問題を理解する必要からあなたのコードを完全に解放します。この種の特別なイベントの実装は(単純な98%動作するバージョンを得るために)些細なことですが、なぜそのようなことをするのでしょうか? 他の人がすでに .
関連
-
[解決済み】Node.jsで "Cannot find module "エラーを解決するには?
-
[解決済み] 期待される代入または関数呼び出し: 未使用式なし ReactJS
-
[解決済み】JavaScript TypeError: null のプロパティ 'style' を読み取ることができない
-
[解決済み] 要素外でのクリックを検出するにはどうすればよいですか?
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptで空文字列/未定義文字列/null文字列をチェックするにはどうすればよいですか?
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JSアレイループと効率解析の比較
-
WeChatアプレット用ユニアプリによるグローバルシェアリング
-
vueディレクティブv-bindの使用と注意点
-
Vueのフォームイベントのデータバインディングの説明
-
[解決済み】awaitは非同期関数でのみ有効です。
-
[解決済み】GETできない / Nodejsエラー
-
[解決済み】「X-Frame-Options」を「SAMEORIGIN」に設定したため、フレームでの表示を拒否された。
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み] history.pushStateで履歴の変更を通知してもらうには?