aboutsummaryrefslogtreecommitdiff
path: root/files/th/web/api/history_api/index.html
blob: 41493b465488d8e80f6a298920fd78e0d3c524f0 (plain)
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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
---
title: Manipulating the browser history
slug: Web/API/History_API
translation_of: Web/API/History_API
---
<p><font><font>DOM {{domxref ("window")}} ให้การเข้าถึงประวัติของเบราเซอร์ผ่าน {{domxref ("window.history", "history")}} วัตถุ </font><font>ช่วยให้คุณสามารถเคลื่อนย้ายไปมาได้ตลอดเวลาผ่านประวัติผู้ใช้เช่นเดียวกับ - โดยเริ่มจาก HTML5 - จัดการกับเนื้อหาของสแต็คประวัติ</font></font></p>

<h2 id="การเดินทางผ่านประวัติศาสตร์"><font><font>การเดินทางผ่านประวัติศาสตร์</font></font></h2>

<p><font><font>ย้ายไปข้างหน้าและย้อนกลับผ่านทางประวัติศาสตร์ของผู้ใช้จะกระทำโดยใช้</font></font><code>back()</code><font><font>, </font></font><code>forward()</code><font><font>และ</font></font><code>go()</code><font><font> วิธีการ</font></font></p>

<h3 id="ก้าวไปข้างหน้าและข้างหลัง"><font><font>ก้าวไปข้างหน้าและข้างหลัง</font></font></h3>

<p><font><font>หากต้องการย้อนกลับไปในอดีตเพียงแค่ทำ:</font></font></p>

<pre class="brush: js"><font><font>window.history.back ();
</font></font></pre>

<p><font><font>วิธีนี้จะทำหน้าที่เหมือนกับผู้ใช้คลิกที่ปุ่มย้อนกลับในแถบเครื่องมือของเบราว์เซอร์</font></font></p>

<p><font><font>ในทำนองเดียวกันคุณสามารถก้าวไปข้างหน้า (เหมือนกับว่าผู้ใช้คลิกปุ่มไปข้างหน้า) เช่นนี้:</font></font></p>

<pre class="brush: js"><font><font>window.history.forward ();
</font></font></pre>

<h3 id="การย้ายไปยังจุดที่เฉพาะเจาะจงในประวัติศาสตร์"><font><font>การย้ายไปยังจุดที่เฉพาะเจาะจงในประวัติศาสตร์</font></font></h3>

<p><font><font>คุณสามารถใช้</font></font><code>go()</code><font><font> วิธีการโหลดหน้าเว็บเฉพาะจากประวัติเซสชันซึ่งระบุโดยตำแหน่งสัมพัทธ์ไปยังหน้าปัจจุบัน (โดยที่หน้าปัจจุบันเป็นดัชนีสัมพัทธ์ 0)</font></font></p>

<p><font><font>หากต้องการย้ายกลับหนึ่งหน้า (เทียบเท่ากับการโทร</font></font><code>back()</code><font><font>):</font></font></p>

<pre class="brush: js"><font><font>window.history.go (-1);
</font></font></pre>

<p><font><font>เพื่อเลื่อนหน้าเว็บเช่นเดียวกับการโทร</font></font><code>forward()</code><font><font>:</font></font></p>

<pre class="brush: js"><font><font>window.history.go (1);
</font></font></pre>

<p><font><font>ในทำนองเดียวกันคุณสามารถย้ายหน้า 2 หน้าโดยการส่งผ่าน 2 เป็นต้น</font></font></p>

<p><font><font>คุณสามารถกำหนดจำนวนหน้าในสแต็คประวัติโดยการดูที่ค่าของคุณสมบัติ length:</font></font></p>

<pre class="brush: js"><font><font>var numberOfEntries = window.history.length;
</font></font></pre>

<div class="note"><strong><font><font>หมายเหตุ:</font></font></strong><font><font> Internet Explorer สนับสนุนการส่ง URL สตริงเป็นพารามิเตอร์ไปยัง</font></font><code>go()</code><font><font>; </font><font>นี้ไม่ได้มาตรฐานและไม่ได้รับการสนับสนุนโดยตุ๊กแก</font></font></div>

<h2 id="การเพิ่มและแก้ไขรายการประวัติ"><font><font>การเพิ่มและแก้ไขรายการประวัติ</font></font></h2>

<p><font><font>{{gecko_minversion_header ("2")}}</font></font></p>

<p><font><font>HTML5 นำเสนอ</font><font>เมธอด</font></font><a href="/en-US/docs/Web/API/History/pushState"><font><font>history.pushState ()</font></font></a><font><font>และ</font></font><a href="/en-US/docs/Web/API/History_API#The_replaceState()_method"><font><font>history.replaceState ()</font></font></a><font><font>ซึ่งช่วยให้คุณสามารถเพิ่มและแก้ไขรายการประวัติตามลำดับได้ </font><font>วิธีการเหล่านี้ทำงานร่วมกับเหตุการณ์ {{domxref ("window.onpopstate")}}</font></font></p>

<p><font><font>การใช้</font></font><code>history.pushState()</code><font><font> การเปลี่ยนแปลง referrer ที่ใช้ในส่วนหัว HTTP สำหรับ</font></font><a href="/en/DOM/XMLHttpRequest" title="en / XMLHttpRequest"><code>XMLHttpRequest</code></a><font><font>อ็อบเจ็กต์ที่สร้างขึ้นหลังจากเปลี่ยนสถานะ </font><font>ผู้อ้างอิงจะเป็น URL ของเอกสารที่มีหน้าต่างอยู่</font></font><code>this</code><font><font>ในขณะที่สร้าง</font></font><a href="/en/DOM/XMLHttpRequest" title="en / XMLHttpRequest"><code>XMLHttpRequest</code></a><font><font>วัตถุ</font></font></p>

<h3 id="ตัวอย่างของวิธีการ_pushState_()"><font><font>ตัวอย่างของวิธีการ pushState ()</font></font></h3>

<p><font><font>สมมติว่า</font></font><span class="nowiki"><font><font>http://mozilla.org/foo.html</font></font></span><font><font>ใช้ JavaScript ต่อไปนี้:</font></font></p>

<pre class="brush: js"><font><font>var stateObj = {foo: "bar"};</font></font><font><font>
history.pushState (stateObj, "page 2", "bar.html");</font></font>
</pre>

<p><font><font>ซึ่งจะทำให้แถบ URL แสดง</font></font><span class="nowiki"><font><font>http://mozilla.org/bar.html</font></font></span><font><font>แต่จะไม่ทำให้เบราว์เซอร์โหลด</font></font><code>bar.html</code><font><font>หรือตรวจสอบว่า</font></font><code>bar.html</code><font><font>มีอยู่</font></font></p>

<p><font><font>สมมติว่าตอนนี้ผู้ใช้ไปที่</font></font><span class="nowiki"><font><font>http://google.com</font></font></span><font><font>แล้วคลิกปุ่มย้อนกลับ </font><font>ณ จุดนี้แถบ URL จะแสดง</font></font><span class="nowiki"><font><font>http://mozilla.org/bar.html</font></font></span><font><font>และ</font></font><s><font><font>หน้าจะได้รับจะไม่ได้รับการ</font></font><code>popstate</code><font><font>จัดกิจกรรมที่มี</font></font><em><font><font>สถานะของวัตถุ</font></font></em><font><font>มีสำเนาของ</font></font><code>stateObj</code></s><font><font>  ถ้าคุณอ่าน</font><font>คุณจะได้รับ</font></font><code>history.state</code><font><font> </font><font> เหตุการณ์จะไม่ถูกเรียกใช้เนื่องจากโหลดหน้าเว็บใหม่แล้ว </font><font>หน้าเว็บจะมีลักษณะเหมือน</font><font>กัน</font></font><code>stateObj</code><code>popstate</code><code>bar.html</code></p>

<p><font><font>ถ้าเราคลิกย้อนกลับอีกครั้ง URL จะเปลี่ยนเป็น</font></font><span class="nowiki"><font><font>http://mozilla.org/foo.html</font></font></span><font><font>และเอกสารจะได้รับ  </font></font><code>popstate</code><font><font>เหตุการณ์พร้อมกับอ็อบเจ็กต์สถานะว่าง </font><font>ที่นี่อีกเช่นกันการย้อนกลับไม่ได้เปลี่ยนเนื้อหาของเอกสารจากสิ่งที่พวกเขาอยู่ในขั้นตอนก่อนหน้าแม้ว่าเอกสารอาจอัปเดตเนื้อหาด้วยตนเองเมื่อได้รับ</font></font><code>popstate</code><font><font>กิจกรรม</font></font></p>

<h3 id="วิธีการ_pushState_()"><font><font>วิธีการ pushState ()</font></font></h3>

<p><code>pushState()</code><font><font>ใช้พารามิเตอร์สามตัว ได้แก่ อ็อบเจ็กต์สถานะชื่อ (ซึ่งปัจจุบันถูกละเว้น) และ (ไม่บังคับ) URL </font><font>ลองดูแต่ละพารามิเตอร์ทั้งสามแบบนี้โดยละเอียด:</font></font></p>

<ul>
 <li>
  <p><strong><font><font>วัตถุรัฐ</font></font></strong><font><font> - วัตถุรัฐเป็นวัตถุ JavaScript </font></font><code>pushState()</code><font><font>ซึ่งมีความเกี่ยวข้องกับประวัติศาสตร์รายการใหม่ที่สร้างขึ้นโดย </font><font>เมื่อใดก็ตามที่ผู้ใช้นำทางไปยังรัฐใหม่เป็น</font></font><code>popstate</code><font><font>เหตุการณ์ถูกยิงและ</font></font><code>state</code><font><font>ทรัพย์สินของเหตุการณ์ประกอบด้วยสำเนาของวัตถุรัฐประวัติศาสตร์ของรายการที่</font></font></p>

  <p><font><font>อ็อบเจ็กต์สถานะสามารถเป็นอะไรก็ได้ที่สามารถต่อเนื่องได้ </font><font>เนื่องจาก Firefox จะบันทึกอ็อบเจ็กต์ของรัฐลงในดิสก์ของผู้ใช้เพื่อให้สามารถเรียกคืนได้หลังจากที่ผู้ใช้เริ่มต้นเบราว์เซอร์ใหม่เราจะกำหนดขีด จำกัด ขนาดของอักขระ 640 กิโลวัตต์ในการแสดงสถานะเป็นอนุกรมของอ็อบเจ็กต์สถานะ </font><font>ถ้าคุณส่งต่ออ็อบเจ็กต์สถานะที่มีการแทนเป็นอนุกรมมีขนาดใหญ่กว่านี้</font></font><code>pushState()</code><font><font>เมธอดจะโยนข้อยกเว้น </font><font>หากคุณต้องการพื้นที่มากขึ้นกว่านี้คุณจะได้รับการสนับสนุนให้ใช้</font><font>และ</font></font><code>sessionStorage</code><font><font> / หรือ</font></font><code>localStorage</code></p>
 </li>
 <li>
  <p><strong><font><font>title</font></font></strong><font><font> - ขณะนี้ Firefox ละเว้นพารามิเตอร์นี้แม้ว่าจะใช้งานได้ในอนาคตก็ตาม </font><font>การผ่านสตริงที่ว่างเปล่าควรมีความปลอดภัยในการเปลี่ยนแปลงวิธีการในอนาคต </font><font>หรือคุณสามารถส่งชื่อสั้น ๆ ให้กับรัฐที่คุณกำลังย้ายได้</font></font></p>
 </li>
 <li>
  <p><strong><font><font>URL</font></font></strong><font><font> - </font><strong><font>URL</font></strong><font>ของรายการประวัติการเข้าใหม่จะถูกกำหนดโดยพารามิเตอร์นี้ </font><font>โปรดทราบว่าเบราเซอร์จะไม่พยายามโหลด URL นี้หลังจากที่โทรเข้า</font></font><code>pushState()</code><font><font>มา แต่อาจพยายามโหลด URL ในภายหลังเช่นหลังจากที่ผู้ใช้รีสตาร์ทเบราเซอร์ </font><font>URL ใหม่ไม่จำเป็นต้องเป็นแบบสัมบูรณ์ </font><font>ถ้าเป็นญาติก็จะแก้ไขได้เมื่อเทียบกับ URL ปัจจุบัน </font><font>URL ใหม่ต้องมีต้นกำเนิดเดียวกันกับ URL ปัจจุบัน </font><font>มิฉะนั้น</font></font><code>pushState()</code><font><font>จะโยนข้อยกเว้น </font><font>พารามิเตอร์นี้เป็นทางเลือก; </font><font>หากไม่ได้ระบุไว้ URL จะถูกกำหนดเป็น URL ปัจจุบันของเอกสาร</font></font></p>
 </li>
</ul>

<div class="note"><strong><font><font>หมายเหตุ:</font></font></strong><font><font>ใน Gecko 2.0 {{geckoRelease ("2.0")}} ผ่าน Gecko 5.0 {{geckoRelease ("5.0")}} วัตถุที่ส่งผ่านจะได้รับการจัดอันดับโดยใช้ JSON </font><font>เริ่มต้นในตุ๊กแก 6.0 {{geckoRelease ( "6.0")}} วัตถุที่ถูกต่อเนื่องโดยใช้</font><font>อัลกอริทึมโคลนโครงสร้าง</font></font><a href="/en/DOM/The_structured_clone_algorithm" title="en / DOM / อัลกอริทึมโคลนที่มีโครงสร้าง"><font><font> </font></font></a><font><font>นี้จะช่วยให้ความหลากหลายของวัตถุที่จะผ่านได้อย่างปลอดภัย</font></font></div>

<p><font><font>ในแง่การโทร</font></font><code>pushState()</code><font><font>จะคล้ายกับการตั้งค่า</font></font><code>window.location = "#foo"</code><font><font>ทั้งสองจะสร้างและเปิดใช้งานรายการบันทึกประวัติอื่นที่เชื่อมโยงกับเอกสารปัจจุบัน </font><font>แต่</font></font><code>pushState()</code><font><font>มีประโยชน์น้อย:</font></font></p>

<ul>
 <li><font><font>URL ใหม่อาจเป็น URL ที่มีต้นกำเนิดเดียวกันกับ URL ปัจจุบัน </font><font>ในทางตรงกันข้ามการตั้งค่า</font></font><code>window.location</code><font><font>ช่วยให้คุณสามารถใช้ {{domxref ("document") {} เดียวกันได้เฉพาะเมื่อคุณแก้ไขเฉพาะแฮช</font></font></li>
 <li><font><font>คุณไม่จำเป็นต้องเปลี่ยน URL หากไม่ต้องการ </font><font>ในทางตรงกันข้ามการตั้งค่า</font><font>จะสร้างประวัติศาสตร์เข้าใหม่เท่านั้นถ้ากัญชาปัจจุบันไม่ได้</font></font><code>window.location = "#foo";</code><code>#foo</code></li>
 <li><font><font>คุณสามารถเชื่อมโยงข้อมูลโดยพลการกับรายการประวัติการเข้าชมใหม่ของคุณได้ </font><font>ด้วยวิธีแฮชที่ใช้คุณจำเป็นต้องเข้ารหัสข้อมูลที่เกี่ยวข้องทั้งหมดลงในสตริงที่สั้น</font></font></li>
 <li><font><font>หาก</font></font><code>title </code><font><font>เบราว์เซอร์ใช้ภายหลังเบราเซอร์ข้อมูลนี้สามารถใช้งานได้ (ไม่ขึ้นอยู่กับการกล่าวคือแฮช)</font></font></li>
</ul>

<p><font><font>โปรดทราบว่าไม่ได้</font></font><code>pushState()</code><font><font>ทำให้เกิด</font></font><code>hashchange</code><font><font>เหตุการณ์ที่จะถูกเรียกใช้แม้ว่า URL ใหม่จะแตกต่างจาก URL เดิมในแฮชก็ตาม</font></font></p>

<p><font><font>ใน</font><font>เอกสาร</font></font><a href="/en-US/docs/Mozilla/Tech/XUL"><font><font>XUL</font></font></a><font><font>จะสร้างองค์ประกอบ XUL ที่ระบุไว้</font></font></p>

<p><font><font>ในเอกสารอื่น  จะสร้างองค์ประกอบด้วย</font></font><code>null</code><font><font>URI namespace</font></font></p>

<h3 id="วิธี_replaceState_()"><font><font>วิธี replaceState ()</font></font></h3>

<p><code>history.replaceState()</code><font><font>ดำเนินการเหมือนกับที่</font></font><code>history.pushState()</code><font><font>ยกเว้นการ</font></font><code>replaceState()</code><font><font>แก้ไขรายการประวัติปัจจุบันแทนการสร้างใหม่ </font><font>โปรดทราบว่าสิ่งนี้ไม่ได้ป้องกันไม่ให้มีการสร้างรายการใหม่ในประวัติเบราเซอร์ทั่วโลก</font></font></p>

<p><code>replaceState()</code><font><font> มีประโยชน์อย่างยิ่งเมื่อคุณต้องการอัปเดตอ็อบเจ็กต์สถานะหรือ URL ของรายการประวัติปัจจุบันเพื่อตอบสนองการดำเนินการบางอย่างของผู้ใช้</font></font></p>

<div class="note"><strong><font><font>หมายเหตุ:</font></font></strong><font><font>ใน Gecko 2.0 {{geckoRelease ("2.0")}} ผ่าน Gecko 5.0 {{geckoRelease ("5.0")}} วัตถุที่ส่งผ่านจะได้รับการจัดอันดับโดยใช้ JSON </font><font>เริ่มต้นในตุ๊กแก 6.0 {{geckoRelease ( "6.0")}} วัตถุที่ถูกต่อเนื่องโดยใช้</font><font>อัลกอริทึมโคลนโครงสร้าง</font></font><a href="/en/DOM/The_structured_clone_algorithm" title="en / DOM / อัลกอริทึมโคลนที่มีโครงสร้าง"><font><font> </font></font></a><font><font>นี้จะช่วยให้ความหลากหลายของวัตถุที่จะผ่านได้อย่างปลอดภัย</font></font></div>

<h3 id="ตัวอย่างวิธี_replaceState_()"><font><font>ตัวอย่างวิธี replaceState ()</font></font></h3>

<p><font><font>สมมติว่า</font></font><span class="nowiki"><font><font>http://mozilla.org/foo.html</font></font></span><font><font>ใช้ JavaScript ต่อไปนี้:</font></font></p>

<pre class="brush: js"><font><font>var stateObj = {foo: "bar"};</font></font><font><font>
history.pushState (stateObj, "page 2", "bar.html");</font></font>
</pre>

<p><font><font>คำอธิบายของสองบรรทัดข้างต้นสามารถดูได้ที่ "ตัวอย่างของวิธีการ pushState ()" </font><font>จากนั้นสมมติว่า</font></font><span class="nowiki"><font><font>http://mozilla.org/bar.html</font></font></span><font><font>เรียกใช้ JavaScript ต่อไปนี้:</font></font></p>

<pre class="brush: js"><font><font>history.replaceState (stateObj, "page 3", "bar2.html");
</font></font></pre>

<p><font><font>ซึ่งจะทำให้แถบ URL แสดง</font></font><span class="nowiki"><font><font>http://mozilla.org/bar2.html</font></font></span><font><font>แต่จะไม่ทำให้เบราว์เซอร์โหลด</font></font><code>bar2.html</code><font><font>หรือแม้แต่การตรวจสอบว่า</font></font><code>bar2.html</code><font><font>มีอยู่</font></font></p>

<p><font><font>สมมติว่าตอนนี้ผู้ใช้ไปที่</font></font><span class="nowiki"><font><font>http://www.microsoft.com</font></font></span><font><font>แล้วคลิกปุ่มย้อนกลับ </font><font>ณ จุดนี้แถบ URL จะแสดง</font></font><span class="nowiki"><font><font>http://mozilla.org/bar2.html </font><font>หากผู้ใช้คลิกกลับมาอีกครั้งแถบ URL จะแสดง http://mozilla.org/foo.html และข้ามผ่าน bar.html ทั้งหมด</font></font></span></p>

<h3 id="เหตุการณ์_popstate"><font><font>เหตุการณ์ popstate</font></font></h3>

<p><code>popstate</code><font><font>เหตุการณ์ที่ถูกส่งไปที่หน้าต่างทุกครั้งที่มีการเปลี่ยนแปลงรายการประวัติใช้งาน </font><font>ถ้ารายการประวัติศาสตร์ที่มีการเปิดใช้งานถูกสร้างขึ้นโดยการเรียก</font></font><code>pushState</code><font><font>หรือรับผลกระทบจากการโทรไป</font></font><code>replaceState</code><font><font>ที่</font></font><code>popstate</code><font><font>เหตุการณ์</font></font><code>state</code><font><font>สถานที่ให้บริการประกอบด้วยสำเนาของวัตถุรัฐประวัติศาสตร์ของรายการที่</font></font></p>

<p><font><font>ดู {{domxref ("window.onpopstate")}} สำหรับการใช้ตัวอย่าง</font></font></p>

<h3 id="อ่านสถานะปัจจุบัน"><font><font>อ่านสถานะปัจจุบัน</font></font></h3>

<p><font><font>เมื่อโหลดหน้าเว็บของคุณอาจมีอ็อบเจ็กต์สถานะที่ไม่ใช่ค่าว่าง </font><font>กรณีเช่นนี้อาจเกิดขึ้นได้เช่นถ้าเพจกำหนดอ็อบเจ็กต์สถานะ (ใช้</font></font><code>pushState()</code><font><font>หรือ</font></font><code>replaceState()</code><font><font>) จากนั้นผู้ใช้จะเริ่มต้นเบราว์เซอร์ใหม่ </font><font>เมื่อหน้าเว็บโหลด</font><span style="font-family: helvetica;"><span style="font-family: courier new;"><font>ซ้ำ</font></span></span><font>หน้าเว็บจะได้รับ</font><span style="font-family: helvetica;"><font>เหตุการณ์</font></span></font><span style="font-family: courier new;"><font><font>onload </font></font></span><span style="font-family: helvetica;"><font><font>แต่ไม่มี</font><font>เหตุการณ์ที่ปรากฏ </font></font></span><font><font>  แต่ถ้าคุณอ่าน</font></font><span style="font-family: courier new;"><font><font>history.state</font></font></span><font><font>คุณสมบัติที่คุณจะได้รับกลับมาวัตถุรัฐที่คุณจะได้รับถ้า</font></font><span style="font-family: courier new;"><font><font>popstate</font></font></span><font><font>ยิง</font></font></p>

<p><font><font>คุณสามารถอ่านสถานะของรายการประวัติปัจจุบันได้โดยไม่ต้องรอ</font></font><code>popstate</code><font><font>เหตุการณ์โดยใช้</font></font><code>history.state</code><font><font>คุณสมบัติเช่นนี้:</font></font></p>

<pre class="brush: js"><font><font>var currentState = history.state;
</font></font></pre>

<h2 id="ตัวอย่าง"><font><font>ตัวอย่าง</font></font></h2>

<p><font><font>สำหรับตัวอย่างที่สมบูรณ์ของเว็บไซต์ AJAX, โปรดดูที่: </font><font>ตัวอย่างการนำทางอาแจ็กซ์</font></font></p>

<h2 id="ข้อมูลจำเพาะ"><font><font>ข้อมูลจำเพาะ</font></font></h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col"><font><font>สเปค</font></font></th>
   <th scope="col"><font><font>สถานะ</font></font></th>
   <th scope="col"><font><font>คิดเห็น</font></font></th>
  </tr>
  <tr>
   <td><font><font>{{SpecName ('HTML WHATWG', "browsers.html # history", "History")}}</font></font></td>
   <td><font><font>{{Spec2 ('HTML WHATWG')}}</font></font></td>
   <td><font><font>ไม่มีการเปลี่ยนแปลงจาก {{SpecName ("HTML5 W3C")}}</font></font></td>
  </tr>
  <tr>
   <td><font><font>{{SpecName ('HTML5 W3C', "browsers.html # history", "History")}}</font></font></td>
   <td><font><font>{{Spec2 ('HTML5 W3C')}}</font></font></td>
   <td><font><font>ความหมายเบื้องต้น</font></font></td>
  </tr>
 </tbody>
</table>

<h2 id="ความเข้ากันได้ของเบราเซอร์"><font><font>ความเข้ากันได้ของเบราเซอร์</font></font></h2>

<p><font><font>{{CompatibilityTable ()}}</font></font></p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th><font><font>ลักษณะ</font></font></th>
   <th><font><font>โครเมียม</font></font></th>
   <th><font><font>ขอบ</font></font></th>
   <th><font><font>Firefox (ตุ๊กแก)</font></font></th>
   <th><font><font>Internet Explorer</font></font></th>
   <th><font><font>อุปรากร</font></font></th>
   <th><font><font>การแข่งรถวิบาก</font></font></th>
  </tr>
  <tr>
   <td><font><font>replaceState, pushState</font></font></td>
   <td><font><font>5</font></font></td>
   <td><font><font>{{CompatVersionUnknown}}</font></font></td>
   <td><font><font>{{CompatGeckoDesktop ("2.0")}}</font></font></td>
   <td><font><font>10</font></font></td>
   <td><font><font>11.50</font></font></td>
   <td><font><font>5.0</font></font></td>
  </tr>
  <tr>
   <td><font><font>history.state</font></font></td>
   <td><font><font>18</font></font></td>
   <td><font><font>{{CompatVersionUnknown}}</font></font></td>
   <td><font><font>{{CompatGeckoDesktop ("2.0")}}</font></font></td>
   <td><font><font>10</font></font></td>
   <td><font><font>11.50</font></font></td>
   <td><font><font>6.0</font></font></td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th><font><font>ลักษณะ</font></font></th>
   <th><font><font>Android</font></font></th>
   <th><font><font>ขอบ</font></font></th>
   <th><font><font>Firefox Mobile (ตุ๊กแก)</font></font></th>
   <th><font><font>IE Mobile</font></font></th>
   <th><font><font>Opera Mobile</font></font></th>
   <th><font><font>Safari มือถือ</font></font></th>
  </tr>
  <tr>
   <td><font><font>replaceState, pushState</font></font></td>
   <td><font><font>{{CompatUnknown ()}}</font></font></td>
   <td><font><font>{{CompatVersionUnknown}}</font></font></td>
   <td><font><font>{{CompatUnknown ()}}</font></font></td>
   <td><font><font>{{CompatUnknown ()}}</font></font></td>
   <td><font><font>{{CompatUnknown ()}}</font></font></td>
   <td><font><font>{{CompatUnknown ()}}</font></font></td>
  </tr>
  <tr>
   <td><font><font>history.state</font></font></td>
   <td><font><font>{{CompatUnknown ()}}</font></font></td>
   <td><font><font>{{CompatVersionUnknown}}</font></font></td>
   <td><font><font>{{CompatUnknown ()}}</font></font></td>
   <td><font><font>{{CompatUnknown ()}}</font></font></td>
   <td><font><font>{{CompatUnknown ()}}</font></font></td>
   <td><font><font>{{CompatUnknown ()}}</font></font></td>
  </tr>
 </tbody>
</table>
</div>

<p><strong style="font-size: 2.143rem; font-weight: 700; letter-spacing: -1px; line-height: 1;"><font><font>ดูสิ่งนี้ด้วย</font></font></strong></p>

<ul>
 <li><font><font>{{domxref ("window.history")}}</font></font></li>
 <li><font><font>{{domxref ("window.onpopstate")}}</font></font></li>
</ul>