HashChangeEvent - Web API 接口参考 编辑
HashChangeEvent 接口表示一个变化事件，当 URL 中的片段标识符发生改变时，会触发此事件。
片段标识符指 URL 中 # 号和它以后的部分。
<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/wiki/zh-CN/docs/Web/API/Event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#D4DDE4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#D4DDE4"/><a xlink:href="/wiki/zh-CN/docs/Web/API/HashChangeEvent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HashChangeEvent</text></a></svg></div>
a:hover text { fill: #0095DD; pointer-events: all;}
属性
这个接口也从 Event 中继承属性。
HashChangeEvent.newURL只读- window即将导航到达的新 URL。
HashChangeEvent.oldURL只读- window此前导航到达过的URL。
方法
这个接口没有自己的方法，但从 Event 中继承方法
示例
井号内容变化的语法选择
你可以选择使用下述的任一方法监听 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 page 中列出了几种回落（fallback）脚本。基本上，这些脚本每隔一段时间检查以此 location.hash。这里是其中一个版本，其仅允许一个处理程序（handler）绑定在 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" ) {
// 执行处理程序
window.onhashchange({
type: "hashchange",
oldURL: oldURL,
newURL: newURL
});
oldURL = newURL;
oldHash = newHash;
}
}, 100);
})(window);
规范
| 规范 | 状态 | 备注 |
|---|---|---|
| HTML Living Standard HashChangeEvent | Living Standard | Initial definition |
浏览器兼容性
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.相关事件
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论