Javascript 在 js 中处理 URL 锚点更改事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2161906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Handle URL anchor change event in js
提问by Bogdan Gusiev
How can I write the JavaScript callback code that will be executed on any changes in the URL anchor?
如何编写将在 URL 锚点发生任何更改时执行的 JavaScript 回调代码？
For example from http://example.com#ato http://example.com#b
例如从http://example.com#a到http://example.com#b
回答by Andy E
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.
Google 自定义搜索引擎使用计时器根据先前值检查哈希值，而单独域上的子 iframe 更新父级的位置哈希值以包含 iframe 文档正文的大小。当计时器捕捉到变化时，父级可以调整 iframe 的大小以匹配正文的大小，以便不显示滚动条。
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.6and Internet Explorer 8allsupport the hashchangeevent:
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);
}
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/.
jQuery 还有一个插件可以检查 hashchange 事件并在必要时提供它自己的 - http://benalman.com/projects/jquery-hashchange-plugin/。
EDIT: Updated browser support (again).
编辑：更新浏览器支持（再次）。
回答by NilColor
setInterval()is only universal solution for now. But there are some light in the future in form of hashchange event
setInterval()目前只是通用解决方案。但未来有一些亮点以hashchange 事件的形式出现
回答by Pekka
From what I see in other SO questions, the only workable cross-browser solution is a timer. Check out this questionfor example.
从我在其他 SO 问题中看到的情况来看，唯一可行的跨浏览器解决方案是计时器。例如，看看这个问题。
回答by Fabian von Ellerts
I would recommend using addEventListenerinstead of overwriting window.onhashchange, otherwise you will block the event for other plugins.
我建议使用addEventListener而不是覆盖window.onhashchange，否则您将阻止其他插件的事件。
window.addEventListener('hashchange', function() {
...
})
Looking at the global browser usage today, a fallback is not needed anymore.
看看当今全球浏览器的使用情况，不再需要回退。
回答by mjhm
(Just for the record.) The YUI3 "hashchange" synthetic event does more or less the same thing as the accepted answer
（仅供记录。）YUI3“hashchange”合成事件或多或少与接受的答案相同
YUI().use('history-hash', function (Y) {
Y.on('hashchange', function (e) {
// Handle hashchange events on the current window.
}, Y.config.win);
});
回答by rahul
You can get more info from this
您可以从中获得更多信息
The mutation event module is designed to allow notification of any changes to the structure of a document, including attr and text modifications.
突变事件模块旨在允许通知对文档结构的任何更改，包括 attr 和文本修改。
