บทความนี้จะอธิบายวิธีการแก้ไข URL โดยไม่ต้องโหลดหน้าเว็บซ้ำโดยใช้ JavaScript
วิธีแก้ไข/เปลี่ยน URL ใน JavaScript โดยไม่ต้องโหลดหน้าซ้ำ
หากต้องการแก้ไข URL โดยไม่โหลดหน้าเว็บซ้ำ ให้ใช้วิธีการที่กำหนดไว้ล่วงหน้าของ JavaScript ต่อไปนี้:
วิธีที่ 1: แก้ไข URL ใน JavaScript โดยไม่ต้องโหลดหน้าซ้ำโดยใช้วิธี “pushState()”
หากต้องการแก้ไข URL โดยไม่โหลดหน้าเว็บซ้ำ ให้ใช้ปุ่ม “ pushState() ' วิธี. เป็นคุณสมบัติหรือวิธีการที่กำหนดไว้ล่วงหน้าของ “ วัตถุประวัติศาสตร์ ” ที่อนุญาตให้เปลี่ยนประวัติเบราว์เซอร์โดยไม่ต้องนำทางหรือรีเฟรชหน้า เพียงแค่เพิ่มหรือแก้ไขกองประวัติและไม่โหลดหน้าใหม่ เมื่อใช้วิธีการนี้ คุณสามารถสลับไปมาระหว่างหน้าต่างๆ โดยเพิ่มรายการใหม่ไปยังกองประวัติของเบราว์เซอร์
ไวยากรณ์
ทำตามไวยากรณ์ที่กำหนดสำหรับเมธอด “pushState()”:
หน้าต่าง. ประวัติศาสตร์ . ผลักดันสถานะ ( สถานะ , ชื่อ , URL ) ;
ที่นี่:
- “ สถานะ ” หมายถึงรายการประวัติศาสตร์ใหม่
- “ ชื่อ ” คือข้อความเฉพาะที่สามารถแสดงที่แถบชื่อเรื่องของเบราว์เซอร์
- “ URL ” ระบุ URL ที่ถูกแทนที่เป็นรายการใหม่
ตัวอย่าง
ในไฟล์ HTML ให้สร้างปุ่มสี่ปุ่มที่เรียก ' แก้ไขUrl() ” ฟังก์ชั่นบนปุ่มคลิก:
< ปุ่มบนคลิก = 'modifyUrl('สอน CSS', 'CSSTutorial.html');' > 2 ปุ่ม >
< ปุ่มบนคลิก = 'modifyUrl('การสอน JavaScript', 'JavaScriptTutorial.html');' > 3 ปุ่ม >
< ปุ่มบนคลิก = 'modifyUrl('การสอน Java', 'JavaTutorial.html');' > 4 ปุ่ม >
กำหนดฟังก์ชัน “ แก้ไขUrl() ” ในไฟล์ JavaScript ที่จะทริกเกอร์เมื่อคลิกปุ่ม ใช้สองพารามิเตอร์คือ ' ชื่อ ' และ ' URL '. เมื่อเรียกใช้เมธอดเมื่อคลิกปุ่ม 'ชื่อ' และ 'url' จะถูกส่งผ่านเป็นอาร์กิวเมนต์ ตรวจสอบประเภทของ “ ผลักดันสถานะ ” ของวัตถุประวัติศาสตร์ ถ้าไม่ใช่ “ ไม่ได้กำหนด '. จากนั้นโทรหา “ history.pushState() ” วิธีการเปลี่ยน URL:
การทำงาน แก้ไขUrl ( ชื่อ , URL ) {
ถ้า ( ประเภทของ ( ประวัติศาสตร์. ผลักดันสถานะ ) != 'ไม่ได้กำหนด' ) {
เคยเป็น คัดค้าน = {
ชื่อ : ชื่อ ,
URL : URL
} ;
ประวัติศาสตร์. ผลักดันสถานะ ( คัดค้าน , คัดค้าน ชื่อ , คัดค้าน URL ) ;
}
}
จะเห็นได้ว่าทุกครั้งที่คลิกปุ่ม URL จะเปลี่ยนได้สำเร็จโดยไม่ต้องโหลดหน้าซ้ำ:
ในผลลัพธ์ด้านบน คุณจะเห็นว่าปุ่มลูกศรย้อนกลับที่ด้านบนซ้าย ( <- ) ถูกเปิดใช้งานขณะคลิกที่ปุ่ม แสดงว่าคุณสามารถเลื่อนไปมาได้เนื่องจากปุ่ม “ pushState() ” วิธีการเพิ่ม URL ใหม่บนกองประวัติ
วิธีที่ 2: แก้ไข URL ใน JavaScript โดยไม่ต้องโหลดหน้าซ้ำโดยใช้เมธอด “replaceState()”
ใช้ ' แทนที่สถานะ () ” วิธีการแก้ไข URL โดยไม่ต้องโหลดหน้าเว็บซ้ำ นอกจากนี้ยังเป็นคุณลักษณะของ ' วัตถุประวัติศาสตร์ ” แต่จะไม่เพิ่มรายการใหม่ลงในกองประวัติ มันเปลี่ยนสถานะที่มีอยู่ของประวัติเบราว์เซอร์และแทนที่ด้วยสถานะใหม่ เมื่อใช้วิธีการนี้ คุณจะไม่สามารถสลับไปมาระหว่างหน้าต่างๆ ได้
ไวยากรณ์
ไวยากรณ์ที่กำหนดใช้สำหรับเมธอด “replaceState()”:
ตัวอย่าง
ในฟังก์ชันที่กำหนด ให้เรียก ' แทนที่สถานะ () ” วิธีแทนที่ URL เมื่อคลิกปุ่มโดยไม่ต้องโหลดซ้ำหรือนำทางหน้า:
ถ้า ( ประเภทของ ( ประวัติศาสตร์. แทนที่สถานะ ) != 'ไม่ได้กำหนด' ) {
เคยเป็น คัดค้าน = {
ชื่อ : ชื่อ ,
URL : URL
} ;
ประวัติศาสตร์. แทนที่สถานะ ( คัดค้าน , คัดค้าน ชื่อ , คัดค้าน URL ) ;
}
}
ผลลัพธ์ระบุว่าทุกครั้งที่คลิกปุ่ม URL มีการเปลี่ยนแปลง และไม่มีตัวเลือกในการนำทางเพื่อย้อนกลับ เนื่องจากปุ่มลูกศรย้อนกลับถูกปิดใช้งาน:
เราได้ให้ข้อมูลที่จำเป็นทั้งหมดที่เกี่ยวข้องกับการแก้ไข URL โดยไม่ต้องโหลดหน้าซ้ำใน JavaScript
บทสรุป
หากต้องการแก้ไข/เปลี่ยน URL โดยไม่รีเฟรชหน้าเว็บ ให้ใช้ปุ่ม “ pushState() ” วิธีการ หรือ “ แทนที่สถานะ () ' วิธี. เมธอด “pushState()” เพิ่ม URL ใหม่เป็นรายการใหม่ในสแต็กประวัติและอนุญาตให้ผู้ใช้นำทางไปมา ในขณะที่เมธอด “replaceState()” จะแทนที่ URL และไม่อนุญาตให้ย้ายไปหน้าหลัง บทความนี้อธิบายวิธีการแก้ไข URL โดยไม่ต้องโหลดหน้าเว็บซ้ำโดยใช้ JavaScript