web-dev-qa-db-ja.com

jsでURLアンカー変更イベントを処理する

URLアンカーの変更で実行されるJavaScriptコールバックコードを作成するにはどうすればよいですか？

たとえば、http://example.com#aからhttp://example.com#b

javascriptevent-handlingdom-eventsfragment-identifierhashchange
86
Bogdan Gusiev

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 Opera 10.6 、 Firefox 3.6 および Internet Explorer 8allhashchangeイベントをサポート：

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 [〜＃〜]：ブラウザのサポートを更新しました（再度）。

124
Andy E

setInterval()は今のところ唯一の普遍的なソリューションです。しかし、将来的には hashchange event の形式でいくつかの光があります

3
NilColor

私が他のSOの質問で見るものから、唯一の実行可能なクロスブラウザソリューションはタイマーです。チェックアウト この質問 たとえば。

2
Pekka 웃

（記録のためだけに。）YUI3 "hashchange"合成イベントは、受け入れられた回答とほぼ同じことを行います。

YUI().use('history-hash', function (Y) {
  Y.on('hashchange', function (e) {
    // Handle hashchange events on the current window.
  }, Y.config.win);
});
1
mjhm

window.onhashchangeを上書きする代わりにaddEventListenerを使用することをお勧めします。そうしないと、他のプラグインのイベントをブロックします。

window.addEventListener('hashchange', function() {
...
})

今日のグローバルブラウザの使用状況を見ると、フォールバックはもう必要ありません。

1
Fabian von Ellerts

詳細はこちらから入手できます

突然変異イベントタイプ

突然変異イベントモジュールは、attrやテキストの変更など、ドキュメントの構造に対する変更を通知できるように設計されています。

0
rahul