ความแตกต่างระหว่าง window.location.href = window.location.href และ window.location.reload ()


196

อะไรคือความแตกต่างระหว่าง JavaScript ของ

window.location.href = window.location.href

และ

window.location.reload()

ฟังก์ชั่น?

คำตอบ:


247

หากฉันจำได้อย่างถูกต้องให้window.location.reload()โหลดหน้าปัจจุบันอีกครั้งด้วยข้อมูล POST ในขณะที่window.location.href=window.location.hrefไม่รวมข้อมูล POST

ตามที่บันทึกไว้โดย @ W3Max ในความคิดเห็นด้านล่างwindow.location.href=window.location.hrefจะไม่โหลดหน้าเว็บซ้ำหากมีจุดยึด (#) ใน URL - คุณต้องใช้window.location.reload()ในกรณีนี้

นอกจากนี้ตามที่ระบุไว้โดย @Mic ด้านล่างwindow.location.reload()รับอาร์กิวเมนต์เพิ่มเติมskipCacheเพื่อให้ใช้window.location.reload(true)เบราว์เซอร์จะข้ามแคชและโหลดหน้าจากเซิร์ฟเวอร์ window.location.reload(false)จะทำตรงข้ามและโหลดหน้าเว็บจากแคชหากเป็นไปได้


11
โปรดทราบว่าเมื่อคุณใช้ window.location.reload () บน POST เบราว์เซอร์จะถามคุณว่าคุณต้องการส่งข้อมูลเพื่อโหลดหน้าซ้ำอีกครั้งหรือไม่
wimh

3
@Wimmel มีวิธีปิดใช้งานข้อความนี้หรือไม่
Kris-I

40
window.location.href = window.location.href จะไม่โหลดหน้าซ้ำหากมีจุดยึด (#) ใน URL - คุณต้องใช้ window.location.reload () ในกรณีนี้
W3Max

5
โปรดทราบว่า location.reload () จะบังคับให้โหลดเนื้อหาสแตติกทั้งหมด (เช่นรีเฟรชฮาร์ดสไตล์ ctrl + f5) ในขณะที่การตั้งค่า location.href กลับไปเป็น href (หรือชื่อพา ธ หรือ URL) ไม่ได้ซึ่งอาจเป็นสิ่งสำคัญ (และ ไม่จำเป็น) ความแตกต่างในความเร็วในการโหลดในบางหน้า
Rob Van Dam

2
@Wimmel Chrome: โหลดหน้าเว็บอีกครั้งด้วย GET Firefox: เรียกใช้งานคำขอก่อนหน้านี้อีกครั้งซึ่งหมายความว่าเป็น POST คุณจะได้รับป๊อปอัปที่ดีถามคุณว่าจะส่งข้อมูลอีกครั้งหรือไม่
Juri

51

หากคุณบอกว่าwindow.location.reload(true)เบราว์เซอร์จะข้ามแคชและโหลดหน้าเว็บจากเซิร์ฟเวอร์ window.location.reload(false)จะทำในสิ่งที่ตรงกันข้าม

หมายเหตุ: defaultค่าสำหรับwindow.location.reload()คือfalse


5
@Ismail - ค่าเริ่มต้นเป็นเท็จ
เทรเวอร์

2
Google Chrome 32 ในขณะที่ใช้ webRTC จริง / เท็จไม่ทำงานสำหรับฉัน ฉันมี iframe กับ webRTC และใช้window.location.href = window.location.hrefการหลอกลวงเท่านั้น

หากคุณได้ทำการเปลี่ยนแปลงรูปแบบบนหน้าการเปลี่ยนแปลงอาจหายไป (เปลี่ยนกลับไปเป็นค่าที่เก็บไว้ชั่วคราว) ขึ้นอยู่กับเบราว์เซอร์เมื่อใช้หรือlocation.reload() การทำเช่นการฟื้นฟูสมบูรณ์ของหน้าใช้location.reload(false) location.reload(true)
Suncat2000

32

ความแตกต่างก็คือ

window.location = document.URL;

จะไม่โหลดหน้าเว็บอีกครั้งหากมีแฮช (#) ใน URL (มีหรือไม่มีบางอย่างหลังจากนั้น) ในขณะที่

window.location.reload();

จะโหลดหน้าเว็บซ้ำ


2
เบราว์เซอร์บางตัวเท่านั้นที่มีปัญหาในการแฮ็กสิ้นสุด หากการแฮชที่ลงท้ายด้วยความกังวลสำหรับคุณให้ลอง: window.location = document.URL.replace (/ # $ /, '');
วอลเตอร์ Stabosz

1
อย่างน้อย Chrome ก็เป็นห่วง ฉันเคยlocation.href = location.hrefรับ แต่ฉันเพิ่งสังเกตเห็นพฤติกรรมที่แน่นอนและมาเพื่อกระจายคำ เพียงใช้location.reload()แทน
Pioul

1
คุณยังสามารถใช้ window.location.pathname แทนการเขียนนิพจน์ทั่วไปเช่นนั้นได้ ตัวอย่างเช่น:window.location.replace(window.location.pathname);
Arseny

20

หากคุณเพิ่มบูลีนจริงลงในการโหลด window.location.reload(true)มันจะโหลดจากเซิร์ฟเวอร์

มันไม่ชัดเจนว่าสนับสนุนบูลนี้เป็นW3Orgกล่าวว่า NS ใช้ในการสนับสนุนมัน

อาจมีความแตกต่างระหว่างเนื้อหาของ window.location.href และdocument.URL - อย่างน้อยก็ใช้เป็นความแตกต่างระหว่าง location.href และdocument.locationที่ไม่ได้มาตรฐานและเลิกใช้แล้วซึ่งเกี่ยวข้องกับการเปลี่ยนเส้นทาง เป็นสหัสวรรษที่ผ่านมาจริงๆ

เพื่อวัตถุประสงค์ด้านเอกสารฉันจะใช้window.location.reload ()เพราะนั่นคือสิ่งที่คุณต้องการทำ


ดูstackoverflow.com/a/5091619/429972เนื่องจากสิ่งนี้จะอธิบายความแตกต่าง
jontro

14

ตามที่กล่าวไว้การแก้ไข href เมื่อมีแฮช (#) ใน URL จะไม่โหลดหน้าเว็บซ้ำ ดังนั้นฉันใช้สิ่งนี้เพื่อโหลดซ้ำแทนนิพจน์ทั่วไป:

if (!window.location.hash) {
    window.location.href = window.location.href;
} else {
    window.location.reload();
}

6

ข้ามคำถามนี้เพื่อค้นหาพฤติกรรมผิดปกติบางอย่างใน IE โดยเฉพาะ IE9 ไม่ได้ตรวจสอบเวอร์ชั่นเก่ากว่านี้ มันดูเหมือน

window.location.reload();

ผลลัพธ์ในการรีเฟรชที่ว่างทั้งหน้าจอเป็นเวลาหนึ่งวินาทีโดยที่

 window.location = document.URL;

รีเฟรชหน้าเว็บเร็วขึ้นมากจนแทบมองไม่เห็น

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

ความแตกต่างของพฤติกรรมระหว่างเบราว์เซอร์คือเมื่อ IE9 ใช้วิธีการโหลดมันจะล้างหน้าที่มองเห็นและสร้างขึ้นมาใหม่ตั้งแต่เริ่มต้นโดยที่ FF และโครเมียมรอจนกระทั่งพวกเขาได้รับสินทรัพย์ใหม่และสร้างใหม่หากพวกเขาแตกต่างกัน


window.location = document.URL รีโหลดหน้าเหมือน window.location.reload () มีสถานะของศิลปะเพื่อความสดชื่นโดยไม่ต้องเลื่อนกลับไปที่ด้านบนหรือไม่อย่างที่คุณพูด?
bigmugcup

6

ความแตกต่างใน Firefox (12.0) คือบนหน้าเว็บที่แสดงผลจาก POST การโหลด () จะปรากฏขึ้นคำเตือนและทำการโพสต์ใหม่ในขณะที่การกำหนด URL จะทำ GET

Google Chrome ทำ GET ให้ทั้งสองอย่าง


1
ดูเหมือนว่าตอนนี้ Chrome 38 จะใช้ POST สำหรับ. reload ()
เกลน Little

3

การใช้ JSF ตอนนี้ฉันมีปัญหากับการรีเฟรชหลังจากเซสชันหมดอายุ: PrimeFaces ViewExpiredException หลังจากโหลดหน้าเว็บซ้ำและมีการตรวจสอบบางอย่างฉันพบความแตกต่างใน FireFox:

การโทรwindow.location.reload()ทำงานเช่นการคลิกไอคอนรีเฟรชบน FF จะเป็นการเพิ่มสาย

Cache-Control max-age=0

ในขณะที่การตั้งค่าใช้window.location.hrefงานได้เช่นกด ENTER ในบรรทัด URL จะไม่ส่งบรรทัดนั้น

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


1

ไม่ไม่ควรมี อย่างไรก็ตามเป็นไปได้ว่ามีความแตกต่างในบางเบราว์เซอร์ดังนั้น (หรือไม่) อาจไม่ทำงานในบางกรณี


1

จากประสบการณ์ของฉันประมาณ 3 ปีฉันไม่พบความแตกต่าง ...

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


0

ในกรณีของเราเราเพียงต้องการโหลดหน้าเว็บใน webview และด้วยเหตุผลบางอย่างเราไม่สามารถหาสาเหตุได้! เราลองใช้เกือบทุกโซลูชันที่อยู่บนเว็บ แต่ไม่ต้องโหลดซ้ำโดยใช้ location.reload () หรือโซลูชันอื่น ๆ เช่น window.location.reload (), location.reload (จริง), ... !

นี่คือทางออกที่ง่ายของเรา:

เพียงใช้แท็ก <a> ที่มีค่าการระบุแหล่งที่มา "href" ที่ว่างเปล่าเช่นนี้:

< a href="" ...>Click Me</a>

(ในบางกรณีคุณต้องใช้ "return true" เมื่อคลิกที่เป้าหมายเพื่อให้โหลดซ้ำ)

สำหรับข้อมูลเพิ่มเติมลองดูคำถามนี้: href ว่างเปล่าใช้ได้ไหม


-3

window.location.href สิ่งนี้ช่วยชีวิตฉันใน webview จาก Android 5.1 หน้าไม่โหลดด้วย location.reload () ในเวอร์ชั่นนี้จาก Android

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