处理Javascript中的URL片段标识符(锚)更改事件

本教程将介绍处理Javascript中的URL片段标识符(锚)更改事件的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

处理Javascript中的URL片段标识符(锚)更改事件 教程 第1张

问题描述

怎么编写将对URL片段标识符(锚点)中的任何更改执行的Javascript回调代码?

例如从http://example.com#ahttp://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片段标识符(锚)更改事件的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。