hashchange

hashchange事件会在页面URL中的片段标识符(第一个#号开始到末尾的所有字符,包括#号)发生改变时触发.

通用信息

规范: HTML5
接口: HashChangeEvent
是否冒泡: 是
能否取消默认行为: 不能
目标: defaultView
默认行为: 无

属性

Property	Type	Description
`target`Read only	`EventTarget`	The browsing context (<code>window</code>).
`type`Read only	`DOMString`	The type of event.
`canBubble`Read only	boolean	Does the event normally bubble?
`cancelable`Read only	boolean	Is it possible to cancel the event?
`oldURL`	string	The previous URL from which the window was navigated. Read only
newURL	string	The new URL to which the window is navigating. Read only

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	5.0	3.6 (1.9.2) Support for the `oldURL`/`newURL` attributes added in Firefox 6.	8.0	10.6	5.0

这个页面里有几个用JavaScript模拟该事件的脚本,原理基本上都是隔一段时间检测一下location.hash是否发生变化.下面的这个实现可以在<code>window.onhashchange</code>属性上绑定事件处理函数:

(function(window) {
 
  // 如果浏览器原生支持该事件,则退出  
if ( "onhashchange" in window.document.body ) { return; }
 
  var location = window.location,
    oldURL = location.href,
    oldHash = location.hash;
 
  // 每隔100ms检测一下location.hash是否发生变化
  setInterval(function() {
    var newURL = location.href,
      newHash = location.hash;
 
    // 如果hash发生了变化,且绑定了处理函数...
    if ( newHash != oldHash && typeof window.onhashchange === "function" ) {
      // execute the handler
      window.onhashchange({
        type: "hashchange",
        oldURL: oldURL,
        newURL: newURL
      });
 
      oldURL = newURL;
      oldHash = newHash;
    }
  }, 100);
 
})(window);

刘老六的狗窝

hashchange

通用信息

属性

浏览器兼容性

相关事件