[解決済み] JavascriptでURLフラグメント識別子(アンカー)の変更イベントを処理する
2023-02-22 15:06:46
質問
URL フラグメント識別子(アンカー)の変更時に実行される Javascript コールバックコードはどのように記述すればよいでしょうか?
例えば
http://example.com#a
から
http://example.com#b
どのように解決するのですか?
Google カスタム検索エンジンは、別のドメインにある子 iframe が iframe ドキュメントの本体のサイズを含むように親の位置ハッシュを更新する間、ハッシュを以前の値と比較するためにタイマーを使用します。 タイマーが変更をキャッチすると、親は iframe のサイズを本体のサイズに合わせて変更し、スクロールバーが表示されないようにすることができます。
次のようなものでも同じことが実現できます。
var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
storedHash = window.location.hash;
hashChanged(storedHash);
}
}, 100); // Google uses 100ms intervals I think, might be lower
Google Chrome 5、Safari 5。
オペラ 10.60
,
Firefox 3.6
および
インターネット エクスプローラ 8
すべて
は
hashchange
イベントをサポートします。
if ("onhashchange" in window) // does the browser support the hashchange event?
window.onhashchange = function () {
hashChanged(window.location.hash);
}
とまとめると
if ("onhashchange" in window) { // event supported?
window.onhashchange = function () {
hashChanged(window.location.hash);
}
}
else { // event not supported:
var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
storedHash = window.location.hash;
hashChanged(storedHash);
}
}, 100);
}
jQuery には、hashchange イベントをチェックし、必要に応じて独自のイベントを提供するプラグインもあります - 。 http://benalman.com/projects/jquery-hashchange-plugin/ .
EDIT : ブラウザサポートを更新しました(再掲)。
関連
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] なぜGoogleはJSONレスポンスにwhile(1);を前置するのでしょうか?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] JavaScriptでURLをエンコードする?
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] JavaScriptでURLの#hashを確認する方法は?
-
[解決済み] Node.jsでbase64エンコードされた画像をAmazon S3へアップロードする
-
[解決済み] Chromeの拡張機能開発にWebStormを使用するにはどうすればよいですか?
-
[解決済み] JavaScriptの文字列プリミティブとStringオブジェクトの違いは何ですか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】JavaScriptでハッシュ後にURLが変更されたかどうかを検出する方法
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] 配列からオブジェクトを生成する
-
[解決済み] Google maps API V3 - 同一地点に複数のマーカーを設置する。
-
[解決済み] 文字列のn番目の出現箇所を取得するには?
-
[解決済み] JavaScriptを使用してHTML要素に属性を追加/更新するには?
-
[解決済み] Javascriptで動的に命名されたメソッドを呼び出すにはどうすればよいですか?
-
[解決済み] AJAX Mailchimp サインアップフォームの統合
-
[解決済み] JavaScriptで長い配列を小さい配列に分割する方法
-
[解決済み] Prototypeを使ってtextareaを自動サイズ調整するには?