วิธีโหลดหน้าใหม่โดยใช้ JavaScript

873

ฉันจะโหลดหน้าใหม่โดยใช้ JavaScript ได้อย่างไร

ฉันต้องการวิธีการที่ใช้ได้กับทุกเบราว์เซอร์

javascript reload

946

JavaScript 1.0

window.location.href = window.location.pathname + window.location.search + window.location.hash;
// creates a history entry

JavaScript 1.1

window.location.replace(window.location.pathname + window.location.search + window.location.hash);
// does not create a history entry

JavaScript 1.2

window.location.reload(false); 
// If we needed to pull the document from
//  the web-server again (such as where the document contents
//  change dynamically) we would pass the argument as 'true'.

— gianebao
แหล่งที่มา

81

'จริง' จะบังคับให้หน้าโหลดซ้ำจากเซิร์ฟเวอร์ 'false' จะโหลดซ้ำจากแคชหากมี

— barro32

3

ไม่.reload(true)ได้รับการบันทึกประวัติศาสตร์? ถ้าเป็นเช่นนั้นจะหลีกเลี่ยงการโหลดซ้ำได้อย่างไร

— johnt Entrepreneur

12

นี่คือลิงค์ไปยังเอกสาร: developer.mozilla.org/en-US/docs/Web/API/window.location

— Justin Ethier

1

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

— Ryan Coolwebs

8

.reload (true) หรือ. reload (false) ถูกคัดค้านตาม IDE และgithub.com/Microsoft/TypeScript/issues/28898ของฉัน- ตอนนี้ควรใช้. reload ()

— danday74

388

location.reload();

ดูหน้า MDN นี้สำหรับข้อมูลเพิ่มเติม

หากคุณกำลังรีเฟรชหลังจากonclickนั้นคุณจะต้องคืนค่าเท็จทันทีหลังจาก

location.reload();
return false;

— Lekensteyn
แหล่งที่มา

22

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

— Raptor

53

@ShivanRaptor โดยปกติแล้วไม่มีในบริบทเว็บเบราว์เซอร์locationเหมือนกับที่window.locationเป็นwindowวัตถุระดับโลก

— Lekensteyn

1

อย่าลืมreturn false;ว่าถ้าเรียกสิ่งนี้จาก onclick ในลิงค์

— Rimian

2

ฉันชอบที่จะใช้window.location.reload();สำหรับการอ่านเช่นlocationอาจจะเป็นตัวแปรท้องถิ่น - windowในขณะที่คุณมักจะต้องการหลีกเลี่ยงตัวแปรของชื่อ

— เยติ

217

นี่คือ535 วิธีในการโหลดหน้าเว็บโดยใช้ JavaScriptlocation = locationที่เป็นที่ง่ายที่สุด

นี่คือ 50 อันดับแรก:

location = location
location = location.href
location = window.location
location = self.location
location = window.location.href
location = self.location.href
location = location['href']
location = window['location']
location = window['location'].href
location = window['location']['href']
location = window.location['href']
location = self['location']
location = self['location'].href
location = self['location']['href']
location = self.location['href']
location.assign(location)
location.replace(location)
window.location.assign(location)
window.location.replace(location)
self.location.assign(location)
self.location.replace(location)
location['assign'](location)
location['replace'](location)
window.location['assign'](location)
window.location['replace'](location)
window['location'].assign(location)
window['location'].replace(location)
window['location']['assign'](location)
window['location']['replace'](location)
self.location['assign'](location)
self.location['replace'](location)
self['location'].assign(location)
self['location'].replace(location)
self['location']['assign'](location)
self['location']['replace'](location)
location.href = location
location.href = location.href
location.href = window.location
location.href = self.location
location.href = window.location.href
location.href = self.location.href
location.href = location['href']
location.href = window['location']
location.href = window['location'].href
location.href = window['location']['href']
location.href = window.location['href']
location.href = self['location']
location.href = self['location'].href
location.href = self['location']['href']
location.href = self.location['href']
...

— Jeremy Thille
แหล่งที่มา

84

ที่น่าสนใจ แต่ตอนนี้ฉันสับสน

— อรุณประสาท ES

14

นอกจากนี้ยังเน้นถึงลักษณะเฉพาะของ Javascript :)

— Jeremy Thille

52

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

— Joshua Behrens

41

แน่นอนว่ายังมีอีกมากมายเช่น:

window.window.window['window'].location = window['window'].window['window']['window']['window']['window']['window']['window']['location']

— Renato

84

window.location.reload();คุณสามารถทำงานนี้ได้โดยใช้ เนื่องจากมีหลายวิธีในการทำเช่นนี้ แต่ฉันคิดว่าเป็นวิธีที่เหมาะสมในการโหลดเอกสารเดียวกันด้วย JavaScript นี่คือคำอธิบาย

window.locationสามารถใช้วัตถุJavaScript

เพื่อรับที่อยู่หน้าปัจจุบัน (URL)
เพื่อเปลี่ยนเส้นทางเบราว์เซอร์ไปยังหน้าอื่น
เพื่อโหลดหน้าเดิมซ้ำ

window: ใน JavaScript แสดงถึงหน้าต่างที่เปิดอยู่ในเบราว์เซอร์

location: ใน JavaScript เก็บข้อมูลเกี่ยวกับ URL ปัจจุบัน

locationวัตถุเป็นเหมือนชิ้นส่วนของที่windowวัตถุและถูกเรียกว่าขึ้นผ่านwindow.locationคุณสมบัติ

location วัตถุมีสามวิธี:

assign(): ใช้สำหรับโหลดเอกสารใหม่
reload(): ใช้เพื่อโหลดเอกสารปัจจุบัน
replace(): ใช้เพื่อแทนที่เอกสารปัจจุบันด้วยเอกสารใหม่

ดังนั้นที่นี่เราจำเป็นต้องใช้reload()เพราะมันสามารถช่วยเราในการโหลดเอกสารเดียวกัน

window.location.reload();ดังนั้นการใช้มันเหมือน

การสาธิตออนไลน์บน jsfiddle

เพื่อขอให้เบราว์เซอร์ของคุณเพื่อดึงหน้าได้โดยตรงจากเซิร์ฟเวอร์ไม่จากแคชคุณสามารถผ่านพารามิเตอร์true location.reload()วิธีนี้ใช้ได้กับเบราว์เซอร์หลัก ๆ ทั้งหมดเช่น IE, Chrome, Firefox, Safari, Opera

— Nikhil Agrawal
แหล่งที่มา

2

อ้า! replace()กลายเป็นโซลูชันที่ฉันค้นหาเพราะฉันต้องการโหลดหน้าเว็บซ้ำด้วยการเปลี่ยนแปลงเล็กน้อยในสตริงข้อความค้นหา

— Bernard Hymmen

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

— pasaba por aqui

54

ลอง:

window.location.reload(true);

พารามิเตอร์ถูกตั้งค่าเป็น 'true' โหลดสำเนาใหม่จากเซิร์ฟเวอร์ การปล่อยออกจะเป็นการให้บริการหน้าเว็บจากแคช

ข้อมูลเพิ่มเติมสามารถพบได้ที่MSDNและในเอกสาร Mozilla

— Orane
แหล่งที่มา

1

ถ้าฉันต้องการรีเฟรชหน้าเว็บภายนอก www.xyz.com/abc

— DoIt

@Dev: คุณควรลองด้วย "แทนที่" ดังที่กล่าวไว้ในภายหลัง

— Jean Paul AKA el_vete

@Orane: ฉันชอบทั้งความเรียบง่ายและความมั่งคั่งของคำตอบนี้โดยเฉพาะอย่างยิ่งเพื่อให้ตัวเลือกมากมายเพียงเพื่อตอบสนองการสอบถาม op ของที่กล่าวว่าขอบคุณที่ให้การเชื่อมโยงผู้มีอำนาจอ้างอิงในสถานการณ์นี้เช่นกันสำหรับการอ้างอิงในอนาคต มีเอ็นจิน JS ของตัวเองสำหรับการเรนเดอร์ ... ฉันคิดว่าคำถามทั่วไปมากและมันควรขึ้นอยู่กับสิ่งที่คุณต้องการทำเพราะอ้างอิงจากเว็บอื่น: " phpied.com/files/location-location/location- " location.html "อาจตอบสนองความต้องการของคำถามนี้อย่างสมบูรณ์ อย่างไรก็ตามสิ่งนี้ช่วยฉัน;)

— Jean Paul AKA el_vete

1

สิ่งนี้ยังคงเป็นจริงหรือไม่? ลิงก์ทั้งสองไม่ได้พูดถึงพารามิเตอร์ใด ๆ สำหรับการโหลดซ้ำ

— Rüdiger Schulz

50

ฉันกำลังมองหาข้อมูลบางอย่างเกี่ยวกับการโหลดซ้ำบนหน้าเว็บที่รับคำขอ POST เช่นหลังจากส่งmethod="post"แบบฟอร์มแล้ว

ในการโหลดหน้าเว็บที่เก็บข้อมูล POST ใหม่ให้ใช้:

window.location.reload();

หากต้องการโหลดหน้าเว็บที่ทิ้งข้อมูล POST (ดำเนินการตามคำขอ GET) ให้ใช้:

window.location.href = window.location.href;

หวังว่านี่จะช่วยให้ผู้อื่นมองหาข้อมูลเดียวกันได้

— Starwarswii
แหล่งที่มา

ขอบคุณสำหรับคำตอบรวมถึงการอ้างอิงถึงการโหลดเอกสารที่ดึงมาใหม่ด้วยการPOSTร้องขอ

— Christopher Schultz

ความแตกต่างระหว่างGETและPOSTวิธีการที่ดี

— Hassan Baig

คำตอบนี้ไกลเกินไป!

— Greg Randall

1

window.location.href = window.location.hrefไม่โหลดหน้าเว็บถ้า URL #ปัจจุบันมี window.location.href = window.location.href.split('#')[0];คุณสามารถลบกัญชาถ้าคุณไม่ต้องการมัน

— Roland Starke

40

หากต้องการโหลดหน้าใหม่โดยใช้ JavaScript ให้ใช้:

window.location.reload();

— Girish Ninama
แหล่งที่มา

37

สิ่งนี้ใช้ได้กับฉัน:

function refresh() {    
    setTimeout(function () {
        location.reload()
    }, 100);
}

http://jsfiddle.net/umerqureshi/znruyzop/

— Umer
แหล่งที่มา

สำหรับฉันแล้วมันจะดีกว่าเพราะมันหลีกเลี่ยงเงื่อนไขการวนรอบบนฝั่งเซิร์ฟเวอร์

— ILMostro_7

1

ฉันซาบซึ้งอย่างยิ่งกับการรวมฟังก์ชั่นการหมดเวลาเนื่องจากฉันมีข้อความที่ฉันยังต้องการดูก่อนที่จะรีเฟรช รุ่งโรจน์!

— Matt Cremeens

คุณสามารถตั้งค่าที่แตกต่างกันเป็นอาร์กิวเมนต์ตัวที่สองในฟังก์ชั่น setTimeout แต่มันจะไม่ทำงานการโหลดซ้ำจะเกิดขึ้นทันทีวิธีการแก้ไข

— O.Kuz

1

@ O.Kuz ไม่คิดอย่างนั้น สมมติว่าหากคุณตั้งค่าเป็น 5000ms การโหลดซ้ำจะเกิดขึ้นหลังจาก 5 วินาที ดูjsfiddle.net/umerqureshi/znruyzop/446

— umer

1

ฉันต้องการค้นหาข้อผิดพลาดในโค้ดของฉัน) ขอบคุณมาก!

— O.Kuz

15

ถ้าคุณใส่

window.location.reload(true);

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

— โจเดฟลิน
แหล่งที่มา

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

— adamdunson

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

— Jean Paul AKA el_vete

IE: <button onclick = "javascript: window.location.reload (true);"

— Jean Paul AKA el_vete

11

location.href = location.href;

— กุ้ยหลิน桂林
แหล่งที่มา

5

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

— Radek Pech

@RadekPech เบราว์เซอร์รุ่นเก่าไม่มีlocation.reload()อะไรบ้าง

— Matthias

8

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

— โจชัว
แหล่งที่มา

8

ใช้ปุ่มหรือวางไว้ในแท็ก "a" (สมอ):

<input type="button" value="RELOAD" onclick="location.reload();" />

ลองสิ่งเหล่านี้สำหรับความต้องการอื่น ๆ :

Location Objects has three methods --

assign() Used to load a new document
reload() Used to reloads the current document.
replace() Used to replace the current document with a new one

— อรุณ ประสาทส.ส.
แหล่งที่มา

1

ที่น่าสนใจ ... <button> </button> เป็นอย่างไร ทำงานเหมือนกันใช่มั้ย

— Jean Paul AKA el_vete

1

มันใช้งานได้เหมือนมีเสน่ห์! ดูคำตอบของฉันด้านล่าง :) ขอบคุณ

— Jean Paul AKA el_vete

5

สั้น ( เพิ่มเติม )

history.go()

— Kamil Kiełczewski
แหล่งที่มา

4

โหลดหน้าซ้ำอัตโนมัติหลังจาก 20 วินาที

<script>
    window.onload = function() {
        setTimeout(function () {
            location.reload()
        }, 20000);
     };
</script>

— อาลี Chegini
แหล่งที่มา

4

ขอบคุณโพสต์นี้มีประโยชน์มากไม่เพียง แต่โหลดหน้าใหม่ด้วยคำตอบที่แนะนำ แต่ยังให้แนวคิดในการวางไอคอน jQuery UI ไว้ที่ปุ่ม:

<button style="display:block; vertical-align:middle; height:2.82em;"
        title="Cargar nuevamente el código fuente sin darle un [Enter] a la dirección en la barra de direcciones"
        class="ui-state-active ui-corner-all ui-priority-primary" 
        onclick="javascript:window.location.reload(true);">
    <span style="display:inline-block;" class="ui-icon ui-icon-refresh"></span>
    &nbsp;[<b>CARGAR NUEVAMENTE</b>]&nbsp;
</button>

2016/07/02

— Jean Paul AKA el_vete
แหล่งที่มา

@ Peter Mortensen: ขอบคุณสำหรับการแก้ไขต้นแบบโครงการนั้นถูกสร้างขึ้นเพื่อวิทยาลัยดังนั้นจึงจำเป็นต้องเป็นภาษาสเปนใน screencaptures ที่แนบมา .. ขอโทษฉันสำหรับสิ่งนั้น .. แน่นอนต้องมี jQuery UI ที่เกี่ยวข้องกับ core การพึ่งพาเพื่อให้มันผสมผสานกันอย่างเช่น: --- ตัวอย่างเช่นวิดเจ็ต ThemeRoller jqueryui.com/themeroller และปลั๊กอินเช่น: plugins.jquery.com/qTip2 , datatables.net .. ห้องสมุด jQuery เอง แต่เป็นต้น การกระทำได้กระทำตามคำตอบบางอย่างด้านบน: onclick = "javascript: window.location.reload (true);">!

— Jean Paul AKA el_vete

3

สิ่งนี้น่าจะใช้ได้:

window.location.href = window.location.href.split( '#' )[0];

หรือ

var x = window.location.href;
x = x.split( '#' );
window.location.href = x[0];

ฉันชอบสิ่งนี้ด้วยเหตุผลดังต่อไปนี้:

ลบส่วนที่อยู่หลังหมายเลข # เพื่อให้แน่ใจว่าหน้าจะโหลดซ้ำบนเบราว์เซอร์ที่จะไม่โหลดเนื้อหาที่มี
มันไม่ได้ถามคุณว่าต้องการที่จะโพสต์เนื้อหาล่าสุดถ้าคุณเพิ่งส่งแบบฟอร์ม
มันควรจะทำงานได้แม้ในเบราว์เซอร์ล่าสุด ทดสอบกับ Firefox และ Chrome ล่าสุด

หรือคุณอาจใช้วิธีทางการล่าสุดสำหรับงานนี้

window.location.reload()

— Ayoola Falola
แหล่งที่มา

3

ใช้ปุ่มนี้เพื่อรีเฟรชหน้า

การสาธิต

<input type="button" value="Reload Page" onClick="document.location.reload(true)">

— Meysam
แหล่งที่มา

2

วิธีการโหลด () ใช้ในการโหลดเอกสารปัจจุบัน

วิธีการรีโหลด () วิธีการนี้เหมือนกับปุ่มรีโหลดในเบราว์เซอร์ของคุณ

โดยค่าเริ่มต้นวิธีการโหลด () วิธีการโหลดหน้าจากแคช แต่คุณสามารถบังคับให้โหลดหน้าจากเซิร์ฟเวอร์โดยการตั้งค่าพารามิเตอร์ forceGet เป็นจริง: location.reload (จริง)

        location.reload();

— GeniusGeek
แหล่งที่มา

-3

คุณสามารถใช้

window.location=document.URL

ที่ document.URL รับ URL หน้าปัจจุบันและ window.location จะโหลดซ้ำ

— Sanu Uthaiah Bollera
แหล่งที่มา

2

เบราว์เซอร์สมัยใหม่ไม่สนใจสิ่งนี้เนื่องจาก href ไม่เปลี่ยนแปลงดังนั้นจึงไม่จำเป็นต้องโหลดซ้ำ คุณควรใช้สิ่งนี้เป็น failover สำหรับเบราว์เซอร์เก่าโดยไม่ต้องรีโหลด: (location.reload? location.reload (): location = document.URL)

— Radek Pech