93

URL フラグメント識別子 (アンカー) が変更されたときに実行される Javascript コールバック コードを作成するにはどうすればよいですか?

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

4

7 に答える 7

130

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.60、Firefox 3.6、およびInternet Explorer 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：ブラウザのサポートを更新しました（再び）。

于 2010-01-29T13:26:07.080 に答える
3

setInterval()今のところ、唯一の普遍的な解決策です。しかし、将来的にはハッシュチェンジイベントの形でいくつかの光があります

于 2010-01-29T14:29:26.243 に答える
3

他のSOの質問で私が見たものから、実行可能な唯一のクロスブラウザソリューションはタイマーです。たとえば、この質問を確認してください。

于 2010-01-29T12:41:47.147 に答える
2

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

YUI().use('history-hash', function (Y) {
  Y.on('hashchange', function (e) {
    // Handle hashchange events on the current window.
  }, Y.config.win);
});
于 2011-07-08T20:32:11.330 に答える
0

あなたはこれからより多くの情報を得ることができます

突然変異イベントタイプ

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

于 2010-01-29T12:45:45.820 に答える