There was a scripting error on this page. While it is being addressed by site editors, you can view partial content below.

This translation is incomplete. Please help translate this article from English.

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;
หมายเหตุ: Internet Explorer สนับสนุนการส่ง URL สตริงเป็นพารามิเตอร์ไปยัง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  เหตุการณ์จะไม่ถูกเรียกใช้เนื่องจากโหลดหน้าเว็บใหม่แล้ว หน้าเว็บจะมีลักษณะเหมือนกัน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 ปัจจุบันของเอกสาร

หมายเหตุ:ใน Gecko 2.0 {{geckoRelease ("2.0")}} ผ่าน Gecko 5.0 {{geckoRelease ("5.0")}} วัตถุที่ส่งผ่านจะได้รับการจัดอันดับโดยใช้ JSON เริ่มต้นในตุ๊กแก 6.0 {{geckoRelease ( "6.0")}} วัตถุที่ถูกต่อเนื่องโดยใช้อัลกอริทึมโคลนโครงสร้าง นี้จะช่วยให้ความหลากหลายของวัตถุที่จะผ่านได้อย่างปลอดภัย

ในแง่การโทร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 ของรายการประวัติปัจจุบันเพื่อตอบสนองการดำเนินการบางอย่างของผู้ใช้

หมายเหตุ:ใน Gecko 2.0 {{geckoRelease ("2.0")}} ผ่าน Gecko 5.0 {{geckoRelease ("5.0")}} วัตถุที่ส่งผ่านจะได้รับการจัดอันดับโดยใช้ JSON เริ่มต้นในตุ๊กแก 6.0 {{geckoRelease ( "6.0")}} วัตถุที่ถูกต่อเนื่องโดยใช้อัลกอริทึมโคลนโครงสร้าง นี้จะช่วยให้ความหลากหลายของวัตถุที่จะผ่านได้อย่างปลอดภัย

ตัวอย่างวิธี 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")}}

Document Tags and Contributors

ผู้มีส่วนร่วมกับหน้านี้: SphinxKnight
อัปเดตล่าสุดโดย: SphinxKnight,