hashchange事件会在页面URL中的片段标识符(第一个#号开始到末尾的所有字符,包括#号)发生改变时触发.
通用信息
- 规范
- 接口
- HashChangeEvent 是否冒泡
- 是 能否取消默认行为
- 不能 目标
- defaultView 默认行为
- 无
属性
| Property | Type | Description |
targetRead only | The browsing context (<code>window</code>). | |
typeRead only | The type of event. | |
canBubbleRead only | boolean | Does the event normally bubble? |
cancelableRead only | boolean | Is it possible to cancel the event? |
oldURL | string | The previous URL from which the window was navigated. Read only |
| newURL | string | The new URL to which the window is navigating. Read only |
浏览器兼容性
- Desktop
- Mobile
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 5.0 | 3.6 (1.9.2)Support for the oldURL/newURL attributes added in Firefox 6. | 8.0 | 10.6 | 5.0 |
里有几个用JavaScript模拟该事件的脚本,原理基本上都是隔一段时间检测一下location.hash是否发生变化.下面的这个实现可以在<code>window.onhashchange</code>属性上绑定事件处理函数:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | ( 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); |