此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
HashChangeEvent
HashChangeEvent 接口表示一个变化事件,当 URL 中的片段标识符发生改变时,会触发此事件。
片段标识符指 URL 中 # 号和它以后的部分。
属性
这个接口也从 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);
规范
| 规范 |
|---|
| HTML # the-hashchangeevent-interface |
浏览器兼容性
启用 JavaScript 以查看此浏览器兼容性表。