ความแตกต่างระหว่าง window.location = และ window.location.replace () คืออะไร


273

มีความแตกต่างระหว่างสองบรรทัดนี้ไหม?

var url = "http://www.google.com/";
window.location = url;
window.location.replace(url);

3
ฉันยังอธิบายสิ่งนี้ที่นี่: stackoverflow.com/questions/846954/…
Mathias Bynens

คำตอบ:


408

window.location เพิ่มรายการในประวัติของคุณโดยที่คุณสามารถ (หรือควรจะสามารถ) คลิก "ย้อนกลับ" และกลับไปที่หน้าปัจจุบัน

window.location.replace แทนที่รายการประวัติปัจจุบันเพื่อให้คุณไม่สามารถย้อนกลับได้

ดูwindow.location:

assign(url): โหลดเอกสารที่ URL ที่ให้ไว้

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

โอ้และพูดโดยทั่วไป:

window.location.href = url;

ได้รับการสนับสนุนมากกว่า:

window.location = url;

52
ทำไมจะwindow.location.hrefได้รับการสนับสนุนมากกว่าwindow.location?
งัด Bynens

13
การสนทนาที่นี่: stackoverflow.com/questions/2383401/…
goodeye

1
คำถาม - หากฉันใช้window.location.replace(URL)ที่ URL ตรงกับที่เป็นอยู่ในปัจจุบันฉันสามารถคาดหวังให้รีเฟรช / โหลดซ้ำหรือมีตัวเลือกในการไม่ทำอะไรเลย
user9645

11

TLDR;

ใช้location.hrefหรือใช้ดีกว่าwindow.location.href;

อย่างไรก็ตามหากคุณอ่านข้อความนี้คุณจะได้รับหลักฐานที่ปฏิเสธไม่ได้

ความจริงมันใช้ได้ดี แต่ทำไมทำสิ่งที่สงสัย คุณควรใช้ถนนที่สูงขึ้นและทำตามที่ควรจะเป็น

location = "#/mypath/otherside"
var sections = location.split('/')

รหัสนี้ถูกต้องอย่างสมบูรณ์แบบไวยากรณ์ฉลาดตรรกะฉลาดพิมพ์ฉลาดคุณรู้ว่าสิ่งเดียวที่ผิดกับมัน

มันมีlocationแทนlocation.href

แล้วเรื่องนี้ล่ะ

var mystring = location = "#/some/spa/route"

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

นี่ฉันเดาได้เลยว่าเบราว์เซอร์ทั้งหมดจะจัดการเหมือนกัน

var mystring = location.href = "#/some/spa/route"

ถ้าคุณวางสิ่งนี้ลงใน typescript มันจะแตกเพราะคอมไพเลอร์ประเภทจะบอกว่านี่เป็นวัตถุ?

อย่างไรก็ตามบทสนทนานี้ลึกซึ้งยิ่งกว่าlocationวัตถุ การแปลงนี้เกี่ยวข้องกับโปรแกรมเมอร์ประเภทใดที่คุณต้องการ

ถ้าคุณใช้ทางลัดนี้ใช่แล้ววันนี้อาจไม่เป็นไรคุณอาจจะไม่เป็นไรพรุ่งนี้ก็อาจไม่เป็นไรตลอดไป แต่ตอนนี้คุณเป็นโปรแกรมเมอร์ที่ไม่ดี มันจะไม่เป็นไรสำหรับคุณและมันจะทำให้คุณล้มเหลว

จะมีวัตถุมากขึ้น จะมีไวยากรณ์ใหม่

คุณอาจกำหนดผู้ทะเลาะที่ใช้สายเพียง แต่ส่งคืนวัตถุและส่วนที่แย่ที่สุดคือคุณจะคิดว่าคุณกำลังทำสิ่งที่ถูกต้องคุณอาจคิดว่าคุณฉลาดสำหรับวิธีฉลาดนี้เพราะคนที่นี่ทำให้คุณหลงทาง

var Person.name = {first:"John":last:"Doe"}
console.log(Person.name) // "John Doe"

ด้วย getters และ setters รหัสนี้จะใช้งานได้จริง แต่เพียงเพราะสามารถทำได้ไม่ได้หมายความว่า 'WISE' จะทำเช่นนั้น

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

ทำสิ่งที่คุณสามารถทำได้อย่างสม่ำเสมอ

+"2"<- เจ้านี่ตรงนี้แยกสตริงเป็นตัวเลข คุณควรใช้มัน? หรือคุณควรใช้parseInt("2")?

แล้วvar num =+"2"ไงล่ะ

จากสิ่งที่คุณได้เรียนรู้จากใจของ stackoverflow ฉันหวังว่าจะไม่มากเกินไป

หากคุณเริ่มทำตามคำ 2 คำเหล่านี้อย่างสม่ำเสมอ คุณจะรู้คำตอบที่ถูกต้องสำหรับคำถามมากมายใน stackoverflow

ให้ฉันแสดงให้คุณเห็นว่าสิ่งนี้จ่ายออกไปอย่างไร โดยปกติฉันวาง;บนจาวาสคริปต์ทุกบรรทัดที่ฉันเขียน ฉันรู้ว่ามันแสดงออกมากขึ้น ฉันรู้ว่ามันชัดเจนยิ่งขึ้น ฉันทำตามกฎของฉันแล้ว วันหนึ่งฉันตัดสินใจที่จะไม่ ทำไม? เพราะมีคนมากมายบอกฉันว่าไม่จำเป็นอีกต่อไปและ JavaScript สามารถทำได้โดยไม่ต้องใช้ ดังนั้นสิ่งที่ฉันตัดสินใจที่จะทำ ตอนนี้เพราะฉันมั่นใจในตัวเองในฐานะโปรแกรมเมอร์ (อย่างที่คุณควรจะสนุกกับผลการเรียนรู้ภาษา) ฉันเขียนอะไรที่ง่ายมากและฉันไม่ได้ตรวจสอบ ฉันลบเครื่องหมายจุลภาคหนึ่งอันและฉันไม่คิดว่าฉันจำเป็นต้องทดสอบอีกครั้งสำหรับสิ่งง่าย ๆ เช่นลบเครื่องหมายจุลภาคหนึ่งอัน

ฉันเขียนสิ่งที่คล้ายกับสิ่งนี้ใน es6 และ babel

var a = "hello world"
(async function(){
  //do work
})()

รหัสนี้ล้มเหลวและใช้เวลานานในการคิดออก ด้วยเหตุผลบางอย่างที่เห็น

var a = "hello world"(async function(){})()

ซ่อนอยู่ลึกลงไปในซอร์สโค้ดมันบอกฉันว่า "สวัสดีโลก" ไม่ใช่ฟังก์ชั่น

เพื่อความสนุกสนานมากขึ้นโหนดจะไม่แสดงแผนที่รหัสต้นทางของ transpiled

เสียเวลาโง่มาก ฉันได้นำเสนอบางคนเกี่ยวกับความยอดเยี่ยมของ ES6 และจากนั้นฉันก็ต้องเริ่มแก้ไขข้อบกพร่องและแสดงให้เห็นว่าปวดหัวฟรีและ ES6 ที่ดีขึ้น ไม่น่าเชื่อใช่ไหม

ฉันหวังว่านี่จะตอบคำถามของคุณ นี่เป็นคำถามเก่าสำหรับคนรุ่นต่อไปที่ยังเรียนรู้อยู่

คำถามเมื่อมีคนบอกว่ามันไม่สำคัญว่าจะทำงานอย่างไร โอกาสเป็นคนที่มีประสบการณ์มากกว่าจะบอกคนอื่นให้ฉลาด

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

ข้อความสุดท้ายของฉันที่ต้องไตร่ตรอง

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

คุณสามารถใช้สิ่งต่าง ๆ เพิ่มเติมไลบรารีโดยไม่ต้องกลัวว่าจะเกิดการขัดจังหวะระหว่างรหัส

สำหรับบันทึก. ใช้

window.location.href


24
คำตอบที่ให้ข้อมูลยาวแย้งอย่างหลงใหล แต่ในการโต้แย้งการใช้window.location.hrefเกินwindow.locationคุณลืมคำถามจริง ๆ แล้วถามถึงความแตกต่างระหว่างเหล่านี้และwindow.location.replace()
AntonChanning

10
ทุกครั้งที่ฉันเห็น TLDR ฉันคาดหวังคำตอบที่สั้นกว่าไม่ใช่อีกต่อไปที่ 5 เท่า
user9645

3
TLDR; use location.href or better use window.location.href; TLDR คือบรรทัดนี้ ที่เหลือคือ "คำตอบ"
Elysiumplain

ฉันไม่คิดว่าคุณให้คะแนนที่ถูกต้องโดยแนะนำกรณีการใช้ที่ผิดปกติ mystring = location.href = "#/some/spa/route"กล่าวคือ นอกจากนี้หลายภาษาจะอนุญาตให้ใช้ตัวพิมพ์ (โดยนัย) ในบางวิธี ในตอนท้ายของวันจาวาสคริปต์เป็นภาษาที่พิมพ์แบบไดนามิกวางแนวคิดเกี่ยวกับประเภทและบอกว่ามันไม่ดีทำให้ไม่มีจุด
apple apple

1
สิ่งที่ถ้ามีคนเขียนทับวัตถุสถานที่ตั้ง ถ้าคุณเขียนทับconsoleหรือเงาwindowตอนนี้คุณมีปัญหาใหญ่กว่า
apple apple
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.