当前位置：文江博客话题详情

在 Javascript 中处理 URL 片段标识符（锚点）更改事件

发布于 2024-08-19 10:29:01 字数 135 浏览 7 评论 0 原文

如何编写将在 URL 片段标识符（锚点）发生任何更改时执行的 Javascript 回调代码？

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

何以心动 2024-08-26 10:29:01

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

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

Google Custom Search Engines use a timer to check the hash against a previous value, whilst the child iframe on a seperate domain updates the parent's location hash to contain the size of the iframe document's body. When the timer catches the change, the parent can resize the iframe to match that of the body so that scrollbars aren't displayed.

Something like the following achieves the same:

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 and Internet Explorer 8 all support the hashchange event:

if ("onhashchange" in window) // does the browser support the hashchange event?
    window.onhashchange = function () {
        hashChanged(window.location.hash);
    }

and putting it together:

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 also has a plugin that will check for the hashchange event and provide its own if necessary - http://benalman.com/projects/jquery-hashchange-plugin/.

EDIT: Updated browser support (again).

回复收藏 0 原文

趴在窗边数星星i 2024-08-26 10:29:01

可以为 hashchange 事件，每当片段标识符发生变化时都会触发该事件：

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

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

纵观当今全球浏览器的使用情况，不再需要回退，因为现代浏览器支持此事件。

An event listener can be added for the hashchange event, which will fire whenever the fragment identifier changes:

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

I would recommend this approach instead of overwriting window.onhashchange, otherwise you will block the event for other plugins.

Looking at the global browser usage today, a fallback is longer needed, as modern browsers support this event.

回复收藏 0 原文

污味仙女 2024-08-26 10:29:01

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

回复收藏 0 原文

热风软妹 2024-08-26 10:29:01

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

回复收藏 0 原文

番薯 2024-08-26 10:29:01

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

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

(Just for the record.) The YUI3 "hashchange" synthetic event does more or less the same thing as the accepted answer

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

回复收藏 0 原文

笑忘罢 2024-08-26 10:29:01

这是一个简单的方法，对我来说用 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);
});

希望它对您有用。

Here's a simple way that worked just fine for me with jQuery.
I've added a animation to scroll to the anchor element aswell:

$(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);
});

Hope it works for you.

回复收藏 0 原文