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/。

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

于 2010-01-29T13:26:07.080 回答
9

可以为hashchange事件添加一个事件监听器，只要片段标识符发生变化，就会触发：

window.addEventListener('hashchange', function() {
  // Perform action
  // [...]
})

我会推荐这种方法而不是覆盖window.onhashchange，否则您将阻止其他插件的事件。

从当今全球浏览器的使用情况来看，由于现代浏览器支持此事件，因此不再需要回退。

于 2019-03-20T11:31:05.017 回答
3

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

于 2010-01-29T12:41:47.147 回答
3

setInterval()是目前唯一的通用解决方案。但是hashchange事件的形式在未来有一些亮点

于 2010-01-29T14:29:26.243 回答
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 回答
1

这是一个简单的方法，对我来说很好用 jQuery。我还添加了一个动画来滚动到锚元素：

$(window).on('hashchange', function(e){
     var origEvent = e.originalEvent;
         var elementToBeClicked = $('a[href^="'+window.location.hash+'"]').click();  
        $([document.documentElement, document.body]).animate({
        scrollTop: 200
    }, 100);
});

希望对你有效。

于 2021-08-25T11:11:09.333 回答
0

您可以从中获取更多信息

突变事件类型

突变事件模块旨在允许通知文档结构的任何更改，包括属性和文本修改。

于 2010-01-29T12:45:45.820 回答