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); |