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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
---
title: WindowEventHandlers.onhashchange
slug: Web/API/WindowEventHandlers/onhashchange
tags:
- Event Handler
- HTML DOM
- Hash
- Property
- Reference
- URL & Hash
- WindowEventHandlers
translation_of: Web/API/WindowEventHandlers/onhashchange
---
<div>{{APIRef("HTML DOM")}}</div>
<p><span class="seoSummary">{{domxref("WindowEventHandlers")}} ミックスインの <strong><code>onhashchange</code></strong> プロパティは、<code><a href="/ja/docs/Web/API/Window/hashchange_event">hashchange</a></code> イベントを処理するための {{event("Event_handlers", "event handler")}} です。</span></p>
<p><code>hashchange</code> イベントは、ウィンドウのハッシュが変更されると発生します（{{domxref("Window.location")}} および {{domxref("HTMLHyperlinkElementUtils.hash")}} を参照）。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<p><strong>イベントハンドラの使用</strong></p>
<pre class="syntaxbox">window.onhashchange = funcRef;
</pre>
<p><strong>HTML イベントハンドラの使用</strong></p>
<pre class="syntaxbox"><body onhashchange="funcRef();">
</pre>
<p><strong>イベントリスナーの使用</strong></p>
<p>イベントリスナーを追加するには、{{domxref("EventTarget.addEventListener()", "addEventListener()")}} を使用します。</p>
<pre class="syntaxbox">window.addEventListener("hashchange", funcRef, false);
</pre>
<h3 id="Parameters" name="Parameters">パラメーター</h3>
<dl>
<dt><code>funcRef</code></dt>
<dd> 関数への参照。</dd>
</dl>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Using_an_event_handler" name="Using_an_event_handler">イベントハンドラの使用</h3>
<p>この例では、イベントハンドラ（<code>window.onhashchange</code>）を使用して、新しいハッシュ値が変更されるたびにチェックします。 それが <code>#cool-feature</code> と等しい場合、スクリプトはコンソールにメッセージを記録します。</p>
<pre class="brush:js">function locationHashChanged() {
if (location.hash === '#cool-feature') {
console.log("あなたはクールな機能を訪れています！");
}
}
window.onhashchange = locationHashChanged;
</pre>
<h3 id="Using_an_event_listener" name="Using_an_event_listener">イベントリスナーの使用</h3>
<p>この例では、イベントリスナーを使用して、ハッシュが変更されるたびに通知を記録します。</p>
<pre class="brush:js">function hashHandler() {
console.log('ハッシュが変更されました！');
}
window.addEventListener('hashchange', hashHandler, false);
</pre>
<h3 id="Overriding_the_hash" name="Overriding_the_hash">ハッシュのオーバーライド</h3>
<p>この関数は、新しいハッシュを動的に設定し、2つの値のいずれかにランダムに設定します。</p>
<pre class="brush:js">function changeHash() {
location.hash = (Math.random() > 0.5) ? 'location1' : 'location2';
}
</pre>
<h2 id="The_hashchange_event" name="The_hashchange_event">hashchange イベント</h2>
<p>送出された <code>hashchange</code> イベントには、次のプロパティがあります。</p>
<table class="standard-table">
<tbody>
<tr>
<td class="header">フィールド</td>
<td class="header">型</td>
<td class="header">説明</td>
</tr>
<tr>
<td><code>newURL</code></td>
<td><code>DOMString</code></td>
<td>ウィンドウがナビゲートされた新しい URL。</td>
</tr>
<tr>
<td><code>oldURL</code></td>
<td><code>DOMString</code></td>
<td>ウィンドウがナビゲートされる前の URL。</td>
</tr>
</tbody>
</table>
<h3 id="Polyfill_for_event.newURL_and_event.oldURL" name="Polyfill_for_event.newURL_and_event.oldURL">event.newURL および event.oldURL のポリフィル</h3>
<pre class="brush:js">// hashchange イベントを登録するコードの前にこのスニペットを実行してください
if (!window.HashChangeEvent)(function(){
var lastURL = document.URL;
window.addEventListener("hashchange", function(event){
Object.defineProperty(event, "oldURL", {enumerable:true,configurable:true,value:lastURL});
Object.defineProperty(event, "newURL", {enumerable:true,configurable:true,value:document.URL});
lastURL = document.URL;
});
}());
</pre>
<h2 id="Specifications" name="Specifications">仕様</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', '#handler-window-onhashchange', 'onhashchange')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("api.WindowEventHandlers.onhashchange")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><code><a href="/ja/docs/Web/API/Window/hashchange_event">hashchange</a></code> イベント</li>
<li><a href="/ja/docs/DOM/Manipulating_the_browser_history">ブラウザーの履歴の操作</a></li>
<li><a href="/ja/docs/DOM/window.history"><code>history.pushState()</code> メソッドと <code>history.replaceState()</code> メソッド</a></li>
<li>{{domxref("WindowEventHandlers.onpopstate")}}</li>
<li>{{domxref("HTMLHyperlinkElementUtils.hash")}}</li>
</ul>
|
