home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Javascript

วิธีดำเนินการเปลี่ยนเส้นทาง JavaScript

มีหลายวิธีในการเปลี่ยนเส้นทางหน้าเว็บ:ฝั่งไคลเอ็นต์โดยใช้เมตาแท็กใน HTML และฝั่งเซิร์ฟเวอร์โดยใช้วิธีการเปลี่ยนเส้นทาง HTTP เพื่อตั้งชื่อบางส่วน ในบทความนี้ เราจะมาดูวิธีการเปลี่ยนเส้นทางหน้าเว็บโดยใช้ JavaScript

สองวิธี

มีสองวิธีที่เป็นไปได้ในการใช้โค้ด JavaScript สำหรับการเปลี่ยนเส้นทางหน้า ทั้งสองเกี่ยวข้องกับวัตถุตำแหน่งหน้าต่าง

href

วิธีแรกเกี่ยวข้องกับคุณสมบัติ href บนวัตถุตำแหน่ง (ซึ่งเป็นส่วนหนึ่งของวัตถุหน้าต่าง) สิ่งเดียวที่คุณต้องทำคือจัดการการเปลี่ยนเส้นทางโดยกำหนด URL ที่คุณต้องการให้เปลี่ยนเส้นทางไปเป็น location.href คุณทำสิ่งนี้ในฟังก์ชัน JavaScript ที่จะดำเนินการเมื่อโหลดหน้า:

<html>
<head>
 <style>
   body {
     font-family: 'Roboto';
     margin: 20px;
   }
   p {
     margin: 0;
     padding: 0;
   }
 </style>
 
</head>
 <body onload=handleRedirect("https://www.careerkarma.com/blog/html")>
     You are being redirect to <a rel="noreferrer noopener" href="https://careerkarma.com/blog/html">https://www.careerkarma.com/blog/html.</a> Please click this link if not redirected in five seconds
 </body>
 <script>
   const handleRedirect = (url) => {
     location.href = url;
   }
 </script>
</html>

ฉันได้เพิ่มแท็กสคริปต์ที่ด้านล่างของเอกสาร ก่อนแท็กเนื้อหา นี่คือที่มาของ JavaScript ของเรา ฟังก์ชันที่เรียกว่า handleRedirect มีพารามิเตอร์ที่เรียกว่า url เรากำหนด location.href ให้กับค่าของ URL นั้น

ที่ด้านบนของเนื้อหาของเอกสาร เรามีเหตุการณ์ onload เหตุการณ์ onload นี้เรียกใช้ฟังก์ชัน JavaScript ที่เรากำหนดให้กับมัน ที่นี่เราได้ส่ง URL ที่เราต้องการให้ไป การเปลี่ยนเส้นทางจะเกิดขึ้นทันทีและไปที่ส่วน HTML ของโพสต์บล็อกของ Career Karma

หากคุณต้องการเพิ่มการหยุดชั่วคราวก่อนที่หน้าจะเปลี่ยนเส้นทาง คุณสามารถทำได้โดยใช้ setTimeout การทำงาน. นี่คือวิธีการ:

const handleRedirect = (url) => {
     setTimeout(() => {
       location.href = url;
     }, 2000);
   }

ทุกสิ่งทุกอย่างยังคงเหมือนเดิม

เมธอดนี้จะเพิ่มหน้าต้นทางไปยังสแต็กประวัติ สามารถเข้าถึงได้โดยปุ่มย้อนกลับของเบราว์เซอร์ มีวิธีอื่นในการแทนที่ URL หากคุณต้องการทำเช่นนั้นแทน – เราจะดูวิธีนั้นต่อไป!

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

เปลี่ยน

location.replace() ต่างจากวิธีการที่เราสร้างขึ้นด้านบนซึ่งกำหนด URL ใหม่ให้กับพร็อพเพอร์ตี้บนออบเจกต์ตำแหน่ง เป็นวิธีที่กำหนดและแทนที่ URL เดิมด้วย URL ที่คุณระบุ

วิธีนี้ไม่ได้วาง URL ดั้งเดิมบนสแต็กของเบราว์เซอร์ แต่จะแทนที่ปลายทางด้วย URL ที่เปลี่ยนเส้นทาง นี่คือวิธีการ:

<html>
<head>
 <style>
   body {
     font-family: 'Roboto';
     margin: 20px;
   }
   p {
     margin: 0;
     padding: 0;
   }
 </style>
 
</head>
 <body onload=location.replace("https://www.careerkarma.com/blog/html")>
     You are being redirect to <a rel="noreferrer noopener" href="https://careerkarma.com/blog/html">https://www.careerkarma.com/blog/html.</a> Please click this link if not redirected in five seconds
 </body>
</html>

อย่างที่คุณเห็น เราไม่ต้องการแท็กสคริปต์เลยสำหรับซับในชิ้นเดียวนี้ เมื่อโหลดเอกสาร มันจะรันเมธอด location.replace ซึ่งจะนำเราไปยังไซต์ในวงเล็บ

แค่นั้นแหละ! ตอนนี้คุณสามารถเปลี่ยนเส้นทางไปยังหน้าเว็บใหม่โดยใช้ JavaScript