HashChangeEvent - 表示片段标识符更改的事件

HashChangeEvent 接口表示当 URL 的片段标识符发生更改时触发的事件。

片段标识符是 URL 中，跟着（包括）# 符号后面的一部分。

属性

该接口还继承了其父接口 Event 的属性。

HashChangeEvent.newURL 只读

窗口导航到的新 URL。

HashChangeEvent.oldURL 只读

窗口导航的上一个 URL。

方法

该接口没有自己的方法，但继承了其父接口 Event 的方法。

实例

获取 hash 更改的方式

您可以使用以下任一方式监听 hashchange 事件：

window.onhashchange = funcRef;

或者

<body onhashchange="funcRef();">

或者

window.addEventListener("hashchange", funcRef, false);

基本实例

function locationHashChanged() {
  if (location.hash === '#somecoolfeature') {
    somecoolfeature();
  }
}

window.addEventListener('hashchange', locationHashChanged);

Polyfill

Modernizr GitHub 页面上列出了几个回退脚本。基本上，这些脚本会通过定期检查 location.hash 来实现该事件。下面是一个自定义版本，只允许一个处理程序绑定到 onhashchange 属性：

;(function(window) {

  // 如果浏览器实现了该事件，则退出
  if ( "onhashchange" in window.document.body ) { return; }

  var location = window.location,
      oldURL = location.href,
      oldHash = location.hash;

  // 以 100 毫秒的间隔检查位置哈希值
  setInterval(function() {
    var newURL = location.href,
        newHash = location.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);

规范

规范 状态 备注
HTML Living Standard
HashChangeEvent 的定义		 现行的标准 初始定义

桌面浏览器兼容性

特性ChromeEdgeFirefoxInternet ExplorerOperaSafari
基础支持5 支持3.6810.65
oldURL 支持 未知6 不支持 支持 未知
newURL 支持 未知6 不支持 支持 未知

移动浏览器兼容性

特性AndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基础支持 支持 支持 支持4 未知11.05
oldURL 支持 支持 未知 支持 未知 支持 未知
newURL 支持 支持 未知 支持 未知 支持 未知

相关事件