Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

hashchange

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

通用信息

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

属性

Property Type Description
target 只读 EventTarget 浏览上下文 (<code>window</code>).
type 只读 DOMString The type of event.
bubbles 只读 boolean Does the event normally bubble?
cancelable 只读 boolean Is it possible to cancel the event?
oldURL 只读 string The previous URL from which the window was navigated.
newURL 只读 string

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 5.0 3.6 (1.9.2)
Firefox 6 中加入对 oldURL/newURL 属性的支持.
8.0 10.6 5.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.2 1.0 (1.9.2) 9.0 11.0 5.

这个页面里有几个用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);

相关事件

文档标签和贡献者

 此页面的贡献者: ziyunfei, manjun.han
 最后编辑者: ziyunfei,