DOM {{domxref ("window")}} ให้การเข้าถึงประวัติของเบราเซอร์ผ่าน {{domxref ("window.history", "history")}} วัตถุ ช่วยให้คุณสามารถเคลื่อนย้ายไปมาได้ตลอดเวลาผ่านประวัติผู้ใช้เช่นเดียวกับ - โดยเริ่มจาก HTML5 - จัดการกับเนื้อหาของสแต็คประวัติ
การเดินทางผ่านประวัติศาสตร์
ย้ายไปข้างหน้าและย้อนกลับผ่านทางประวัติศาสตร์ของผู้ใช้จะกระทำโดยใช้back()
, forward()
และgo()
วิธีการ
ก้าวไปข้างหน้าและข้างหลัง
หากต้องการย้อนกลับไปในอดีตเพียงแค่ทำ:
window.history.back ();
วิธีนี้จะทำหน้าที่เหมือนกับผู้ใช้คลิกที่ปุ่มย้อนกลับในแถบเครื่องมือของเบราว์เซอร์
ในทำนองเดียวกันคุณสามารถก้าวไปข้างหน้า (เหมือนกับว่าผู้ใช้คลิกปุ่มไปข้างหน้า) เช่นนี้:
window.history.forward ();
การย้ายไปยังจุดที่เฉพาะเจาะจงในประวัติศาสตร์
คุณสามารถใช้go()
วิธีการโหลดหน้าเว็บเฉพาะจากประวัติเซสชันซึ่งระบุโดยตำแหน่งสัมพัทธ์ไปยังหน้าปัจจุบัน (โดยที่หน้าปัจจุบันเป็นดัชนีสัมพัทธ์ 0)
หากต้องการย้ายกลับหนึ่งหน้า (เทียบเท่ากับการโทรback()
):
window.history.go (-1);
เพื่อเลื่อนหน้าเว็บเช่นเดียวกับการโทรforward()
:
window.history.go (1);
ในทำนองเดียวกันคุณสามารถย้ายหน้า 2 หน้าโดยการส่งผ่าน 2 เป็นต้น
คุณสามารถกำหนดจำนวนหน้าในสแต็คประวัติโดยการดูที่ค่าของคุณสมบัติ length:
var numberOfEntries = window.history.length;
go()
; นี้ไม่ได้มาตรฐานและไม่ได้รับการสนับสนุนโดยตุ๊กแกการเพิ่มและแก้ไขรายการประวัติ
{{gecko_minversion_header ("2")}}
HTML5 นำเสนอเมธอดhistory.pushState ()และhistory.replaceState ()ซึ่งช่วยให้คุณสามารถเพิ่มและแก้ไขรายการประวัติตามลำดับได้ วิธีการเหล่านี้ทำงานร่วมกับเหตุการณ์ {{domxref ("window.onpopstate")}}
การใช้history.pushState()
การเปลี่ยนแปลง referrer ที่ใช้ในส่วนหัว HTTP สำหรับXMLHttpRequest
อ็อบเจ็กต์ที่สร้างขึ้นหลังจากเปลี่ยนสถานะ ผู้อ้างอิงจะเป็น URL ของเอกสารที่มีหน้าต่างอยู่this
ในขณะที่สร้างXMLHttpRequest
วัตถุ
ตัวอย่างของวิธีการ pushState ()
สมมติว่าhttp://mozilla.org/foo.htmlใช้ JavaScript ต่อไปนี้:
var stateObj = {foo: "bar"}; history.pushState (stateObj, "page 2", "bar.html");
ซึ่งจะทำให้แถบ URL แสดงhttp://mozilla.org/bar.htmlแต่จะไม่ทำให้เบราว์เซอร์โหลดbar.html
หรือตรวจสอบว่าbar.html
มีอยู่
สมมติว่าตอนนี้ผู้ใช้ไปที่http://google.comแล้วคลิกปุ่มย้อนกลับ ณ จุดนี้แถบ URL จะแสดงhttp://mozilla.org/bar.htmlและหน้าจะได้รับจะไม่ได้รับการ ถ้าคุณอ่านคุณจะได้รับpopstate
จัดกิจกรรมที่มีสถานะของวัตถุมีสำเนาของstateObj
history.state
เหตุการณ์จะไม่ถูกเรียกใช้เนื่องจากโหลดหน้าเว็บใหม่แล้ว หน้าเว็บจะมีลักษณะเหมือนกันstateObj
popstate
bar.html
ถ้าเราคลิกย้อนกลับอีกครั้ง URL จะเปลี่ยนเป็นhttp://mozilla.org/foo.htmlและเอกสารจะได้รับ popstate
เหตุการณ์พร้อมกับอ็อบเจ็กต์สถานะว่าง ที่นี่อีกเช่นกันการย้อนกลับไม่ได้เปลี่ยนเนื้อหาของเอกสารจากสิ่งที่พวกเขาอยู่ในขั้นตอนก่อนหน้าแม้ว่าเอกสารอาจอัปเดตเนื้อหาด้วยตนเองเมื่อได้รับpopstate
กิจกรรม
วิธีการ pushState ()
pushState()
ใช้พารามิเตอร์สามตัว ได้แก่ อ็อบเจ็กต์สถานะชื่อ (ซึ่งปัจจุบันถูกละเว้น) และ (ไม่บังคับ) URL ลองดูแต่ละพารามิเตอร์ทั้งสามแบบนี้โดยละเอียด:
-
วัตถุรัฐ - วัตถุรัฐเป็นวัตถุ JavaScript
pushState()
ซึ่งมีความเกี่ยวข้องกับประวัติศาสตร์รายการใหม่ที่สร้างขึ้นโดย เมื่อใดก็ตามที่ผู้ใช้นำทางไปยังรัฐใหม่เป็นpopstate
เหตุการณ์ถูกยิงและstate
ทรัพย์สินของเหตุการณ์ประกอบด้วยสำเนาของวัตถุรัฐประวัติศาสตร์ของรายการที่อ็อบเจ็กต์สถานะสามารถเป็นอะไรก็ได้ที่สามารถต่อเนื่องได้ เนื่องจาก Firefox จะบันทึกอ็อบเจ็กต์ของรัฐลงในดิสก์ของผู้ใช้เพื่อให้สามารถเรียกคืนได้หลังจากที่ผู้ใช้เริ่มต้นเบราว์เซอร์ใหม่เราจะกำหนดขีด จำกัด ขนาดของอักขระ 640 กิโลวัตต์ในการแสดงสถานะเป็นอนุกรมของอ็อบเจ็กต์สถานะ ถ้าคุณส่งต่ออ็อบเจ็กต์สถานะที่มีการแทนเป็นอนุกรมมีขนาดใหญ่กว่านี้
pushState()
เมธอดจะโยนข้อยกเว้น หากคุณต้องการพื้นที่มากขึ้นกว่านี้คุณจะได้รับการสนับสนุนให้ใช้และsessionStorage
/ หรือlocalStorage
-
title - ขณะนี้ Firefox ละเว้นพารามิเตอร์นี้แม้ว่าจะใช้งานได้ในอนาคตก็ตาม การผ่านสตริงที่ว่างเปล่าควรมีความปลอดภัยในการเปลี่ยนแปลงวิธีการในอนาคต หรือคุณสามารถส่งชื่อสั้น ๆ ให้กับรัฐที่คุณกำลังย้ายได้
-
URL - URLของรายการประวัติการเข้าใหม่จะถูกกำหนดโดยพารามิเตอร์นี้ โปรดทราบว่าเบราเซอร์จะไม่พยายามโหลด URL นี้หลังจากที่โทรเข้า
pushState()
มา แต่อาจพยายามโหลด URL ในภายหลังเช่นหลังจากที่ผู้ใช้รีสตาร์ทเบราเซอร์ URL ใหม่ไม่จำเป็นต้องเป็นแบบสัมบูรณ์ ถ้าเป็นญาติก็จะแก้ไขได้เมื่อเทียบกับ URL ปัจจุบัน URL ใหม่ต้องมีต้นกำเนิดเดียวกันกับ URL ปัจจุบัน มิฉะนั้นpushState()
จะโยนข้อยกเว้น พารามิเตอร์นี้เป็นทางเลือก; หากไม่ได้ระบุไว้ URL จะถูกกำหนดเป็น URL ปัจจุบันของเอกสาร
ในแง่การโทรpushState()
จะคล้ายกับการตั้งค่าwindow.location = "#foo"
ทั้งสองจะสร้างและเปิดใช้งานรายการบันทึกประวัติอื่นที่เชื่อมโยงกับเอกสารปัจจุบัน แต่pushState()
มีประโยชน์น้อย:
- URL ใหม่อาจเป็น URL ที่มีต้นกำเนิดเดียวกันกับ URL ปัจจุบัน ในทางตรงกันข้ามการตั้งค่า
window.location
ช่วยให้คุณสามารถใช้ {{domxref ("document") {} เดียวกันได้เฉพาะเมื่อคุณแก้ไขเฉพาะแฮช - คุณไม่จำเป็นต้องเปลี่ยน URL หากไม่ต้องการ ในทางตรงกันข้ามการตั้งค่าจะสร้างประวัติศาสตร์เข้าใหม่เท่านั้นถ้ากัญชาปัจจุบันไม่ได้
window.location = "#foo";
#foo
- คุณสามารถเชื่อมโยงข้อมูลโดยพลการกับรายการประวัติการเข้าชมใหม่ของคุณได้ ด้วยวิธีแฮชที่ใช้คุณจำเป็นต้องเข้ารหัสข้อมูลที่เกี่ยวข้องทั้งหมดลงในสตริงที่สั้น
- หาก
title
เบราว์เซอร์ใช้ภายหลังเบราเซอร์ข้อมูลนี้สามารถใช้งานได้ (ไม่ขึ้นอยู่กับการกล่าวคือแฮช)
โปรดทราบว่าไม่ได้pushState()
ทำให้เกิดhashchange
เหตุการณ์ที่จะถูกเรียกใช้แม้ว่า URL ใหม่จะแตกต่างจาก URL เดิมในแฮชก็ตาม
ในเอกสารXULจะสร้างองค์ประกอบ XUL ที่ระบุไว้
ในเอกสารอื่น ๆ จะสร้างองค์ประกอบด้วยnull
URI namespace
วิธี replaceState ()
history.replaceState()
ดำเนินการเหมือนกับที่history.pushState()
ยกเว้นการreplaceState()
แก้ไขรายการประวัติปัจจุบันแทนการสร้างใหม่ โปรดทราบว่าสิ่งนี้ไม่ได้ป้องกันไม่ให้มีการสร้างรายการใหม่ในประวัติเบราเซอร์ทั่วโลก
replaceState()
มีประโยชน์อย่างยิ่งเมื่อคุณต้องการอัปเดตอ็อบเจ็กต์สถานะหรือ URL ของรายการประวัติปัจจุบันเพื่อตอบสนองการดำเนินการบางอย่างของผู้ใช้
ตัวอย่างวิธี replaceState ()
สมมติว่าhttp://mozilla.org/foo.htmlใช้ JavaScript ต่อไปนี้:
var stateObj = {foo: "bar"}; history.pushState (stateObj, "page 2", "bar.html");
คำอธิบายของสองบรรทัดข้างต้นสามารถดูได้ที่ "ตัวอย่างของวิธีการ pushState ()" จากนั้นสมมติว่าhttp://mozilla.org/bar.htmlเรียกใช้ JavaScript ต่อไปนี้:
history.replaceState (stateObj, "page 3", "bar2.html");
ซึ่งจะทำให้แถบ URL แสดงhttp://mozilla.org/bar2.htmlแต่จะไม่ทำให้เบราว์เซอร์โหลดbar2.html
หรือแม้แต่การตรวจสอบว่าbar2.html
มีอยู่
สมมติว่าตอนนี้ผู้ใช้ไปที่http://www.microsoft.comแล้วคลิกปุ่มย้อนกลับ ณ จุดนี้แถบ URL จะแสดงhttp://mozilla.org/bar2.html หากผู้ใช้คลิกกลับมาอีกครั้งแถบ URL จะแสดง http://mozilla.org/foo.html และข้ามผ่าน bar.html ทั้งหมด
เหตุการณ์ popstate
popstate
เหตุการณ์ที่ถูกส่งไปที่หน้าต่างทุกครั้งที่มีการเปลี่ยนแปลงรายการประวัติใช้งาน ถ้ารายการประวัติศาสตร์ที่มีการเปิดใช้งานถูกสร้างขึ้นโดยการเรียกpushState
หรือรับผลกระทบจากการโทรไปreplaceState
ที่popstate
เหตุการณ์state
สถานที่ให้บริการประกอบด้วยสำเนาของวัตถุรัฐประวัติศาสตร์ของรายการที่
ดู {{domxref ("window.onpopstate")}} สำหรับการใช้ตัวอย่าง
อ่านสถานะปัจจุบัน
เมื่อโหลดหน้าเว็บของคุณอาจมีอ็อบเจ็กต์สถานะที่ไม่ใช่ค่าว่าง กรณีเช่นนี้อาจเกิดขึ้นได้เช่นถ้าเพจกำหนดอ็อบเจ็กต์สถานะ (ใช้pushState()
หรือreplaceState()
) จากนั้นผู้ใช้จะเริ่มต้นเบราว์เซอร์ใหม่ เมื่อหน้าเว็บโหลดซ้ำหน้าเว็บจะได้รับเหตุการณ์onload แต่ไม่มีเหตุการณ์ที่ปรากฏ แต่ถ้าคุณอ่านhistory.stateคุณสมบัติที่คุณจะได้รับกลับมาวัตถุรัฐที่คุณจะได้รับถ้าpopstateยิง
คุณสามารถอ่านสถานะของรายการประวัติปัจจุบันได้โดยไม่ต้องรอpopstate
เหตุการณ์โดยใช้history.state
คุณสมบัติเช่นนี้:
var currentState = history.state;
ตัวอย่าง
สำหรับตัวอย่างที่สมบูรณ์ของเว็บไซต์ AJAX, โปรดดูที่: ตัวอย่างการนำทางอาแจ็กซ์
ข้อมูลจำเพาะ
สเปค | สถานะ | คิดเห็น |
---|---|---|
{{SpecName ('HTML WHATWG', "browsers.html # history", "History")}} | {{Spec2 ('HTML WHATWG')}} | ไม่มีการเปลี่ยนแปลงจาก {{SpecName ("HTML5 W3C")}} |
{{SpecName ('HTML5 W3C', "browsers.html # history", "History")}} | {{Spec2 ('HTML5 W3C')}} | ความหมายเบื้องต้น |
ความเข้ากันได้ของเบราเซอร์
{{CompatibilityTable ()}}
ลักษณะ | โครเมียม | ขอบ | Firefox (ตุ๊กแก) | Internet Explorer | อุปรากร | การแข่งรถวิบาก |
---|---|---|---|---|---|---|
replaceState, pushState | 5 | {{CompatVersionUnknown}} | {{CompatGeckoDesktop ("2.0")}} | 10 | 11.50 | 5.0 |
history.state | 18 | {{CompatVersionUnknown}} | {{CompatGeckoDesktop ("2.0")}} | 10 | 11.50 | 6.0 |
ลักษณะ | Android | ขอบ | Firefox Mobile (ตุ๊กแก) | IE Mobile | Opera Mobile | Safari มือถือ |
---|---|---|---|---|---|---|
replaceState, pushState | {{CompatUnknown ()}} | {{CompatVersionUnknown}} | {{CompatUnknown ()}} | {{CompatUnknown ()}} | {{CompatUnknown ()}} | {{CompatUnknown ()}} |
history.state | {{CompatUnknown ()}} | {{CompatVersionUnknown}} | {{CompatUnknown ()}} | {{CompatUnknown ()}} | {{CompatUnknown ()}} | {{CompatUnknown ()}} |
ดูสิ่งนี้ด้วย
- {{domxref ("window.history")}}
- {{domxref ("window.onpopstate")}}