บางครั้ง นักพัฒนาต้องการรีเฟรชหน้าเว็บบ่อยๆ ในขณะที่สร้างเว็บแอปพลิเคชัน เช่น บล็อกหรือเว็บไซต์ ซึ่งเนื้อหาอาจแตกต่างกันไปตามการกระทำของผู้ใช้ ข้อมูลที่อัปเดตตามการโต้ตอบของผู้ใช้เหล่านี้จะแสดงขึ้นเมื่อหน้ารีเฟรชหรือโหลดซ้ำ เพื่อจุดประสงค์นี้ JavaScript เสนอวิธีการที่สร้างไว้ล่วงหน้าซึ่งจะกล่าวถึงด้านล่าง
โพสต์นี้จะอธิบายวิธีการโหลดหน้าใหม่โดยใช้ JavaScript
จะโหลดหน้าใหม่โดยใช้ JavaScript ได้อย่างไร
สำหรับการโหลดซ้ำหรือรีเฟรชหน้า ให้ใช้วิธีการต่อไปนี้ใน JavaScript:
วิธีที่ 1: โหลดหน้าใหม่โดยใช้วิธี reload()
ใช้ ' สถานที่โหลด () ” วิธีโหลดหน้าซ้ำ มันทำหน้าที่เหมือนกับปุ่มรีเฟรชของเบราว์เซอร์ “ โหลดซ้ำ () ” เมธอดมีหน้าที่รับผิดชอบในการโหลดหน้าใหม่ ในขณะที่เมธอด “ ที่ตั้ง ” เป็นอินเทอร์เฟซที่ระบุตำแหน่งจริง (URL) ของวัตถุที่เกี่ยวข้อง URL ของหน้าที่จะรีเฟรชสามารถเข้าถึงได้โดย “ เอกสาร.สถานที่ ' หรือ ' window.location '.
ไวยากรณ์
ใช้ไวยากรณ์ต่อไปนี้เพื่อโหลดหน้าปัจจุบันใหม่โดยใช้เมธอด reload():
window.location.reload ( ) ;ตัวอย่างที่ 1: รีเฟรชเมื่อคลิกปุ่ม
สร้างปุ่มและแนบ ' เมื่อคลิก ” เหตุการณ์ที่จะเรียก JavaScript ที่กำหนดไว้ล่วงหน้า “ โหลดซ้ำ () ' กระบวนการ:
< ปุ่ม เมื่อคลิก = 'window.location.reload()' > รีเฟรช / โหลดหน้าใหม่ ปุ่ม >ผลลัพธ์ระบุว่าเพจได้รับการรีเฟรชหรือโหลดซ้ำเมื่อคลิกปุ่ม:
ตัวอย่างที่ 2: รีเฟรชอัตโนมัติโดยใช้วิธี setTimeout() ด้วยวิธี reload()
ตั้งเวลารีเฟรชหน้าอัตโนมัติโดยใช้ปุ่ม “ setTimeout() ' กระบวนการ. ขั้นแรก เราจะกำหนดวิธีการ “ รีเฟรช () ” ซึ่งใช้ช่วงเวลาเป็นพารามิเตอร์เพื่อรีเฟรชหน้าหลังจากเวลานั้น เรียกเมธอด setTimeout() แล้วเรียกเมธอด reload():
การทำงาน รีเฟรช ( เวลา ) {ตั้งหมดเวลา ( ( ) = > {
document.location.reload ( จริง ) ;
} , เวลา ) ;
}
ที่นี่ เราจะตั้งเวลา 2 วินาทีเพื่อรีเฟรชหน้าทุกๆ สองวินาที:
window.onload = รีเฟรช ( 2543 ) ;อย่างที่คุณเห็นได้ว่าหน้าจะรีเฟรชโดยอัตโนมัติหลังจากผ่านไป 2 วินาที:
วิธีที่ 2: โหลดหน้าใหม่โดยใช้วิธี go()
อีกวิธีหนึ่งในการรีเฟรชหน้าคือ “ history.go() ' กระบวนการ. การให้ค่าเป็นบวกหรือลบสามารถใช้เพื่อย้อนกลับหรือไปข้างหน้าได้ตามปกติ หากต้องการรีเฟรช ให้ผ่าน “ 0 ” ค่าเป็นกลางหรือไม่มีเลย
ไวยากรณ์
ทำตามไวยากรณ์ที่กำหนดเพื่อโหลดหน้าซ้ำ:
history.go ( )ตัวอย่าง
ในที่นี้จะขอเรียกว่า “ history.go() ” วิธีการในเหตุการณ์การคลิกปุ่ม:
< ปุ่ม เมื่อคลิก = 'history.go()' > รีเฟรช / โหลดหน้าใหม่ ปุ่ม >เอาต์พุต
นั่นคือทั้งหมดที่เกี่ยวกับการโหลดซ้ำ/รีเฟรชหน้าเว็บโดยใช้ JavaScript
บทสรุป
สำหรับการโหลดหน้าเว็บซ้ำโดยใช้ JavaScript ให้ใช้ปุ่ม “ window.location.reload() ” วิธีการ หรือ “ history.go() ' กระบวนการ. เมธอด reload() เป็นวิธีที่ใช้บ่อยที่สุดในการโหลดซ้ำหรือรีเฟรชหน้าเว็บ โพสต์นี้แสดงวิธีการรีเฟรชหน้าโดยใช้ JavaScript