Question

如何编写将对URL锚点中的任何更改执行的JavaScript回调代码？

例如，从http://example.com#a到http://example.com#b

Answer 1

Google自定义搜索引擎使用计时器检查前一个值的哈希，而单独域上的子iframe更新父级的位置哈希，以包含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/。

编辑：更新了浏览器支持（再次）。

Answer 2

setInterval()目前只是普遍的解决方案。但是，未来有一些亮点是hashchange event

Answer 3

从我在其他SO问题中看到的，唯一可行的跨浏览器解决方案是计时器。例如，请查看this question。

Answer 4

（仅供记录。）YUI3“hashchange”合成事件或多或少与接受的答案相同

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

Answer 5

您可以从此

获取更多信息

Mutation event types

设计了突变事件模块允许通知任何更改到文档的结构，包括attr和文本修改。

Answer 6

我建议您使用addEventListener而不是覆盖window.onhashchange，否则您将阻止其他插件的事件。

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

看看今天的全球浏览器使用情况，就不再需要回退了。

在js中处理URL锚点更改事件

6 个答案: