Manipulating the browser history

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;

การเพิ่มและแก้ไขรายการประวัติ

{{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  เหตุการณ์จะไม่ถูกเรียกใช้เนื่องจากโหลดหน้าเว็บใหม่แล้ว หน้าเว็บจะมีลักษณะเหมือนกันstateObjpopstatebar.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 ที่ระบุไว้

ในเอกสารอื่น ๆ จะสร้างองค์ประกอบด้วยnullURI 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, โปรดดูที่: ตัวอย่างการนำทางอาแจ็กซ์

ข้อมูลจำเพาะ

ความเข้ากันได้ของเบราเซอร์

{{CompatibilityTable ()}}

ดูสิ่งนี้ด้วย

• {{domxref ("window.history")}}
• {{domxref ("window.onpopstate")}}