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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
---
title: HashChangeEvent
slug: Web/API/HashChangeEvent
tags:
- API
- Event
- HTML5
- HashChange
- 事件
- 参考
- 接口
translation_of: Web/API/HashChangeEvent
---
<div>{{APIRef("HTML DOM")}}</div>
<p><code><strong>HashChangeEvent</strong></code> 接口表示一个变化事件，当 URL 中的片段标识符发生改变时，会触发此事件。</p>
<p>片段标识符指 URL 中 <code>#</code> 号和它以后的部分。</p>
<p>{{InheritanceDiagram}}</p>
<h2 id="属性">属性</h2>
<p><em> 这个接口也从 {{domxref("Event")}} 中继承属性。</em></p>
<dl>
<dt>{{domxref("HashChangeEvent.newURL")}} {{readonlyInline}} {{gecko_minversion_inline("6.0")}}</dt>
<dd>window即将导航到达的新 URL。</dd>
<dt>{{domxref("HashChangeEvent.oldURL")}} {{readonlyInline}} {{gecko_minversion_inline("6.0")}}</dt>
<dd>window此前导航到达过的URL。</dd>
</dl>
<h2 id="方法">方法</h2>
<p><em>这个接口没有自己的方法，但从 {{domxref("Event")}} 中继承方法</em></p>
<h2 id="示例">示例</h2>
<h3 id="井号内容变化的语法选择">井号内容变化的语法选择</h3>
<p>你可以选择使用下述的任一方法监听 {{event("hashchange")}} 事件。</p>
<pre class="brush: js">window.onhashchange = funcRef;
</pre>
<p><strong>或</strong></p>
<pre class="brush: html"><body onhashchange="funcRef();">
</pre>
<p><strong>或</strong></p>
<pre class="brush: js">window.addEventListener("hashchange", funcRef, false);
</pre>
<h3 id="基本示例">基本示例</h3>
<pre class="brush:js">function locationHashChanged() {
if (location.hash === '#somecoolfeature') {
somecoolfeature();
}
}
window.addEventListener('hashchange', locationHashChanged);
</pre>
<dl>
</dl>
<h2 id="回落方法（Polyfill）">回落方法（Polyfill）</h2>
<p>在 <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills">Modernizr GitHub page</a> 中列出了几种回落（fallback）脚本。基本上，这些脚本每隔一段时间检查以此 {{domxref("HTMLHyperlinkElementUtils.hash", "location.hash")}}。这里是其中一个版本，其仅允许一个处理程序（handler）绑定在 {{domxref("WindowEventHandlers.onhashchange", "onhashchange")}} 属性上：</p>
<pre class="brush: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);
</pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("HTML WHATWG", "#hashchangeevent", "HashChangeEvent")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.HashChangeEvent")}}</p>
<h2 id="相关事件">相关事件</h2>
<ul>
<li>{{event("hashchange")}}</li>
<li>{{event("popstate")}}</li>
</ul>
|
