Handle URL fragment identifier (anchor) change event in Javascript(处理Javascript中的URL片段标识符(锚)更改事件)
问题描述
如何编写将对URL片段标识符(锚点)中的任何更改执行的Javascript回调代码?
例如从http://example.com#a
到http://example.com#b
推荐答案
Google Custom Search Engines使用计时器对照先前的值检查散列,而单独域上的子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/。
编辑:(再次)更新浏览器支持。
这篇关于处理Javascript中的URL片段标识符(锚)更改事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:处理Javascript中的URL片段标识符(锚)更改事件
基础教程推荐
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 在for循环中使用setTimeout 2022-01-01
- 我什么时候应该在导入时使用方括号 2022-01-01
- 动态更新多个选择框 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01