From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/th/web/api/history_api/index.html | 249 ++++++++++++++++++++++++++++++++ 1 file changed, 249 insertions(+) create mode 100644 files/th/web/api/history_api/index.html (limited to 'files/th/web/api/history_api/index.html') diff --git a/files/th/web/api/history_api/index.html b/files/th/web/api/history_api/index.html new file mode 100644 index 0000000000..41493b4654 --- /dev/null +++ b/files/th/web/api/history_api/index.html @@ -0,0 +1,249 @@ +--- +title: Manipulating the browser history +slug: Web/API/History_API +translation_of: Web/API/History_API +--- +

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 ลองดูแต่ละพารามิเตอร์ทั้งสามแบบนี้โดยละเอียด:

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

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

+ + + +

โปรดทราบว่าไม่ได้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, pushState5{{CompatVersionUnknown}}{{CompatGeckoDesktop ("2.0")}}1011.505.0
history.state18{{CompatVersionUnknown}}{{CompatGeckoDesktop ("2.0")}}1011.506.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ลักษณะAndroidขอบFirefox Mobile (ตุ๊กแก)IE MobileOpera MobileSafari มือถือ
replaceState, pushState{{CompatUnknown ()}}{{CompatVersionUnknown}}{{CompatUnknown ()}}{{CompatUnknown ()}}{{CompatUnknown ()}}{{CompatUnknown ()}}
history.state{{CompatUnknown ()}}{{CompatVersionUnknown}}{{CompatUnknown ()}}{{CompatUnknown ()}}{{CompatUnknown ()}}{{CompatUnknown ()}}
+
+ +

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

+ + -- cgit v1.2.3-54-g00ecf