hashchange
hashchange事件会在页面URL中的片段标识符(第一个#号开始到末尾的所有字符,包括#号)发生改变时触发.
通用信息
- 规范
- HTML5
- 接口
- HashChangeEvent
- 是否冒泡
- 是
- 能否取消默认行为
- 不能
- 目标
- defaultView
- 默认行为
- 无
属性
| Property | Type | Description |
targetRead only |
EventTarget |
The browsing context (<code>window</code>). |
typeRead only |
DOMString |
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 |
浏览器兼容性
| 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); |
