HashChangeEvent

HashChangeEvent 接口表示一个变化事件,当 URL 中的片段标识符发生改变时,会触发此事件。

片段标识符指 URL 中 # 号和它以后的部分。

Event HashChangeEvent

属性

这个接口也从 Event 中继承属性。

HashChangeEvent.newURL 只读

window 即将导航到达的新 URL。

HashChangeEvent.oldURL 只读

window 此前导航到达过的 URL。

方法

这个接口没有自己的方法,但从 Event 中继承方法。

示例

基本示例

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

window.addEventListener("hashchange", locationHashChanged);

回落方法(Polyfill)

Modernizr GitHub page 中列出了几种回落(fallback)脚本。基本上,这些脚本每隔一段时间检查以此 location.hash。这里是其中一个版本,其仅允许一个处理程序(handler)绑定在 onhashchange 属性上:

js
(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") {
      // 执行处理程序
      window.onhashchange({
        type: "hashchange",
        oldURL: oldURL,
        newURL: newURL,
      });

      oldURL = newURL;
      oldHash = newHash;
    }
  }, 100);
})(window);

规范

Specification
HTML Standard
# the-hashchangeevent-interface

浏览器兼容性

BCD tables only load in the browser

相关事件