home

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

JavaScript:ไปที่ URL:คู่มือฉบับสมบูรณ์

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

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

JavaScript ไปที่ URL

API ประวัติเบราว์เซอร์ JavaScript ช่วยให้คุณไปที่ URL ใหม่ คุณสามารถใช้วิธีการต่อไปนี้เพื่อนำทางไปยัง URL ใหม่:

  • กำหนดค่าใหม่ให้กับ window.location
  • ใช้เมธอด window.assign()
  • ใช้เมธอด window.replace()

ทั้งสามวิธีนี้บรรลุเป้าหมายในการนำทางไปยัง URL อื่นอย่างเท่าเทียมกัน มาดูวิธีการเหล่านี้กัน

จาวาสคริปต์ window.location ค่า

ในการนำทางไปยัง URL ใหม่ ให้ใช้วัตถุตำแหน่งจาก API ประวัติของเบราว์เซอร์ ประวัติเซสชันช่วยให้คุณกำหนดวัตถุตำแหน่งใหม่ให้กับ URL ใหม่หรือใช้คุณสมบัติ href บนวัตถุเดียวกันนั้นได้

ไวยากรณ์สำหรับวิธีนี้คือ:

window.location = "url";

“url” หมายถึง URL ที่คุณต้องการให้ผู้ใช้เข้าชม เมื่อโค้ดบรรทัดนี้ทำงาน การเปลี่ยนเส้นทาง JavaScript จะเริ่มต้นขึ้น สิ่งนี้จะเปลี่ยนหน้าที่ผู้ใช้ดูในเว็บเบราว์เซอร์ของตน

ลองดูวิธีนี้ในรูปแบบของตัวอย่าง:

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

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

const handleClick = (e) => {
      console.log("click")
      window.location = ('https://careerkarma.com') 
      // window.location.href = ('https://careerkarma.com')
      console.log(window.location)
    }

เมื่อฟังก์ชัน handleClick() ทำงาน โค้ดของเราจะบันทึกคำสั่งไปยังคอนโซล JavaScript จากนั้น รหัสของเราจะเปลี่ยนเส้นทางเราไปยัง URL ใหม่

JavaScript window.location.assign()

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

กองประวัติแสดงถึงหน้าที่คุณได้ดู (ลองนึกถึง “ลูกศรย้อนกลับ” ที่ให้คุณย้อนกลับหน้า)

พิจารณาไวยากรณ์ต่อไปนี้:

window.location.assign("url");

ต่างจากตัวอย่างที่แล้ว เราไม่จำเป็นต้องกำหนดค่าใดๆ ให้กับตัวแปร JavaScript (window.location) แต่เราใช้วิธีเปลี่ยนหน้าเว็บที่ผู้ใช้ดูแทน

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

มาดูตัวอย่างแบบเต็มของวิธีนี้กัน:

const handleClick = (e) => {
      console.log("click")
      window.location.assign('https://careerkarma.com');      
}

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

const handleClick = (e) => {
      console.log("click")
      window.location.pathname = ('/newpage.html')
      console.log(window.location)
}

JavaScript window.location.replace()

คุณสามารถควบคุมได้ว่าจะให้ผู้ใช้ใช้ปุ่มย้อนกลับเพื่อกลับไปยังไซต์ก่อนหน้าหรือไม่

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

มาดูวิธีการแทนที่ () กัน:

window.location.replace("url");

เช่นเดียวกับ assign() แทนที่ () เป็นวิธีการ เมธอดนี้ยอมรับหนึ่งอาร์กิวเมนต์:A URL ที่คุณต้องการชี้ผู้ใช้

เราสามารถใช้วิธี replace() กับฟังก์ชันที่กำหนดเองเพื่อเปลี่ยน URL ที่ผู้ใช้ดูเมื่อเรียกใช้เมธอด:

const handleClick = (e) => {
      console.log("click")
      window.location.replace('https://careerkarma.com'); 
}

ใช้ Repl.it นี้เพื่อเล่นกับวิธีการต่างๆ ในการเปลี่ยนเส้นทางไปยัง URL ที่คุณเลือก คุณสามารถใช้ปุ่มเรียกใช้เพื่อรีเซ็ตรหัสเป็นค่าเริ่มต้นได้

บทสรุป

มีสามวิธีในการไปที่ URL ใน JavaScript:ใช้ window.location, window.location.assign() หรือ window.location.replace() วิธีการ

คุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ JavaScript หรือไม่? ดูคู่มือ How to Learn JavaScript ของเรา คู่มือนี้มีเคล็ดลับสำคัญเกี่ยวกับวิธีการเรียนรู้ JavaScript และรายการทรัพยากรการเรียนรู้ที่ครอบคลุมสำหรับผู้เริ่มต้นและนักพัฒนาระดับกลาง