如何编写 JavaScript 回调函数,以在 URL 片段标识符(锚点)改变时执行?
例如从 http://example.com#a
到 http://example.com#b
如何编写 JavaScript 回调函数,以在 URL 片段标识符(锚点)改变时执行?
例如从 http://example.com#a
到 http://example.com#b
谷歌自定义搜索引擎使用定时器检查哈希值是否与先前的值匹配,而在不同域上的子iframe会更新父级的位置哈希以包含iframe文档体的大小。当计时器捕获到更改时,父级可以调整iframe的大小以匹配body的大小,以便不显示滚动条。
类似以下内容即可达到相同的效果:
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/.
编辑:更新了浏览器支持(再次)。
可以为 hashchange
事件添加一个事件监听器,在片段标识符变化时触发:
window.addEventListener('hashchange', function() {
// Perform action
// [...]
})
我建议采用这种方法,而不是覆盖window.onhashchange
,否则您将阻止其他插件使用此事件。
从今天全球浏览器的使用情况来看,不再需要回退,因为现代浏览器都支持此事件。
YUI().use('history-hash', function (Y) {
Y.on('hashchange', function (e) {
// Handle hashchange events on the current window.
}, Y.config.win);
});
$(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);
});
window
上的hashChange
事件。https://dev59.com/4Gw15IYBdhLWcg3wzO1_ - Timo HuovinenhashChanged(storedHash);
这样的事件。 - Timo Huovinen