HTML Academy · บทเรียน

Navigation API ในเบราว์เซอร์สมัยใหม่

ใช้ Navigation API เพื่อดักจับและปรับแต่งการนำทาง

Navigation API ในเบราว์เซอร์สมัยใหม่ เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

สิ่งทดแทนสมัยใหม่

Navigation API เป็นสิ่งทดแทน History API ที่ใหม่กว่าและมีความสามารถมากกว่า โดยมองการนำทางเป็นออบเจ็กต์หลักที่คุณสามารถดักจับ ยกเลิก และรอให้เสร็จได้ ซึ่งใกล้เคียงกับวิธีที่ SPA ต้องจัดการการกำหนดเส้นทางจริง ๆ ในปี 2024

ออบเจ็กต์ window.navigation

window.navigation เปิดให้เข้าถึงรายการต่าง ๆ รายการปัจจุบัน และเหตุการณ์การนำทาง navigation.entries() ส่งคืนทุกรายการในประวัติปัจจุบัน ส่วน navigation.currentEntry คือรายการที่กำลังใช้งาน เปรียบเทียบกับค่า length ที่ไม่เปิดเผยรายละเอียดและสถานะที่อ่านไม่ได้ของ History API

เหตุการณ์ navigate

รับฟัง navigation.addEventListener("navigate", handler) เพื่อดักจับการนำทางภายในเอกสารเดียวกันทุกประเภท ทั้งการคลิกลิงก์ การส่งแบบฟอร์ม การย้อนกลับหรือไปข้างหน้า และการนำทางโดยโปรแกรม จุดเชื่อมต่อเดียวนี้มาแทนการปะติดปะต่อระหว่างการดักจับการคลิก เหตุการณ์การเปลี่ยนประวัติ และตัวรับฟังการส่งแบบฟอร์ม

navigation.addEventListener("navigate", (e) => {
  if (!e.canIntercept) return;
  e.intercept({
    handler: async () => {
      await renderPage(new URL(e.destination.url).pathname);
    }
  });
});

intercept และตัวจัดการ

การเรียก e.intercept({ handler }) จะทำให้โค้ดของคุณเข้าควบคุมการนำทาง ตัวจัดการจะส่งคืนพรอมิส ระหว่างที่พรอมิสนั้นยังไม่เสร็จ การนำทางจะอยู่ในสถานะ “กำลังดำเนินการ” และที่อยู่จะอัปเดตเรียบร้อยแล้ว วิธีนี้รวมปัญหาการแข่งขันแบบเดิมระหว่างการเปลี่ยนที่อยู่กับการแสดงผลมุมมองไว้ด้วยกัน

การตรวจสอบ canIntercept

การนำทางบางประเภทไม่สามารถดักจับได้ เช่น การนำทางข้ามต้นทางหรือการดาวน์โหลด ให้ตรวจสอบ e.canIntercept ก่อนเรียก intercept การตรวจสอบแบบป้องกันนี้มีเพียงบรรทัดเดียว และช่วยแยกการนำทางของ SPA ออกจากการออกไปยังต้นทางอื่นจริง ๆ

วิธีการ navigation.navigate

navigation.navigate(url, options) เริ่มการนำทางโดยโปรแกรม ซึ่งเทียบเท่ากับการคลิก ออบเจ็กต์ที่ส่งคืนมีพรอมิส committed และ finished ทำให้คุณรอได้จนที่อยู่เปลี่ยน หรือจนตัวจัดการทำงานเสร็จสมบูรณ์

สถานะและคีย์ของรายการ

รายการนำทางแต่ละรายการมี key ที่คงที่ตลอดการโหลดใหม่ และมี id ที่มีผลเฉพาะในแต่ละเซสชัน ให้ใช้คีย์สำหรับสถานะถาวร เช่น ตำแหน่งการเลื่อนหรือร่างแบบฟอร์มที่บันทึกไว้ และใช้รหัสสำหรับสถานะชั่วคราว สถานะเพียงอย่างเดียวของ History API เป็นเพียงข้อมูลก้อนหนึ่งที่ไม่เปิดเผยรายละเอียด

ย้อนกลับและไปข้างหน้า

navigation.back() และ navigation.forward() เป็นวิธีอำนวยความสะดวกที่ห่อหุ้ม traverseTo ทั้งสองวิธีส่งคืนพรอมิสคู่เดิมสำหรับการยืนยันและการทำงานเสร็จสิ้น คุณจึงรอให้การย้อนกลับเสร็จก่อนทำงานต่อได้

การยกเลิกการนำทาง

หากผู้ใช้คลิกลิงก์ที่สองขณะที่การนำทางครั้งแรกยังคงกำลังแสดงผลอยู่ ระบบสามารถยกเลิกการนำทางที่กำลังดำเนินอยู่ได้ ตัวจัดการจะได้รับ AbortSignal ผ่าน e.signal โปรดส่งค่านี้ไปกับการเรียก fetch เพื่อให้งานที่ล้าสมัยถูกยกเลิกเมื่อการนำทางใหม่เริ่มขึ้น

e.intercept({
  handler: async () => {
    const data = await fetch(url, { signal: e.signal });
    renderPage(await data.json());
  }
});

เหตุใดจึงไม่ใช้ประวัติการนำทางเพียงอย่างเดียว

ส่วนเชื่อมต่อประวัติการนำทางใช้งานได้ แต่ค่อนข้างยุ่งยาก: การเปลี่ยนแปลงสถานะและการแสดงผลมุมมองแยกออกจากกัน การจัดการการคลิกต้องทำด้วยตนเอง การประสานงานระหว่างตัวรับฟังหลายตัวไม่แน่นอน และการคืนตำแหน่งการเลื่อนยังไม่สมบูรณ์ ส่วนเชื่อมต่อการนำทางได้รับการออกแบบมาเพื่อความต้องการของ SPA ตั้งแต่แรก และแก้ปัญหาเหล่านี้ได้ทั้งหมด

การรองรับของเบราว์เซอร์

Chrome และ Edge รองรับส่วนเชื่อมต่อการนำทาง ส่วน Safari และ Firefox ยังตามหลังอยู่ (ณ ต้นปี 2026) โปรดส่งโค้ดที่ตรวจสอบฟีเจอร์ก่อน ("navigation" in window) และใช้ทางเลือกสำรองเป็นส่วนเชื่อมต่อประวัติการนำทางร่วมกับเหตุการณ์การเปลี่ยนสถานะเมื่อไม่รองรับ ไลบรารีอย่าง SvelteKit และเราเตอร์ของ TanStack จัดการการตรวจสอบนี้ให้แล้ว

ควรเริ่มใช้งานเมื่อใด

สำหรับโครงการใหม่ที่มีกลุ่มเป้าหมายซึ่งใช้ Chromium เป็นหลัก ควรเริ่มใช้งานตอนนี้และยอมรับทางเลือกสำรองเป็นส่วนเชื่อมต่อประวัติการนำทาง สำหรับเว็บไซต์สาธารณะที่มีกลุ่มผู้ชมกว้าง ควรรอให้ Safari และ Firefox รองรับก่อน (หรือใช้ไลบรารีเราเตอร์ที่ซ่อนความแตกต่างของทั้งสองแบบไว้) ส่วนเชื่อมต่อที่เรียบง่ายกว่านี้คุ้มค่ากับการรอ

ตรวจสอบความรู้

ข้อได้เปรียบหลักของเหตุการณ์ navigate ของส่วนเชื่อมต่อการนำทางเหนือการใช้ popstate ร่วมกับการดักจับการคลิกด้วยตนเองของส่วนเชื่อมต่อประวัติการนำทางคืออะไร

สรุป

ส่วนเชื่อมต่อการนำทางรวมการนำทางของ SPA ไว้ภายใต้เหตุการณ์ navigate เดียว พร้อมความหมายของ intercept และการยกเลิก คีย์ entry ที่คงที่ และการรอผลลัพธ์แบบอะซิงโครนัสของตัวจัดการ โดยมาแทนชุดวิธีแก้เฉพาะหน้าที่ประกอบด้วยส่วนเชื่อมต่อประวัติการนำทาง เหตุการณ์การเปลี่ยนสถานะ และการดักจับการคลิก ปัจจุบันรองรับในเบราว์เซอร์ Chromium แล้ว โปรดตรวจสอบฟีเจอร์และใช้ส่วนเชื่อมต่อประวัติการนำทางเป็นทางเลือกสำรองสำหรับโค้ดข้ามเบราว์เซอร์ จนกว่า Safari และ Firefox จะรองรับ

คำถามที่พบบ่อย

บทเรียน “Navigation API ในเบราว์เซอร์สมัยใหม่” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Navigation API ในเบราว์เซอร์สมัยใหม่” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Navigation API ในเบราว์เซอร์สมัยใหม่”

ใช้ Navigation API เพื่อดักจับและปรับแต่งการนำทาง คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “Navigation API ในเบราว์เซอร์สมัยใหม่” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ HTML Academy