Cara memuat ulang halaman menggunakan JavaScript


876

Bagaimana saya bisa memuat ulang halaman menggunakan JavaScript?

Saya perlu metode yang berfungsi di semua browser.

Jawaban:


948

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'.

82
'true' akan memaksa halaman untuk memuat ulang dari server. 'false' akan memuat ulang dari cache, jika tersedia.
barro32

3
Apakah .reload(true)ditambahkan ke riwayat? Jika demikian, bagaimana cara menghindarinya dengan memuat ulang?
johntrepreneur


1
Ini ADALAH jawaban terbaik dan harus di atas. Masalah saya dengan fungsi-fungsi lainnya adalah mereka tidak menyegarkan halaman dengan konten dari server dan menggunakan cache, jadi solusi JavaScript 1.2 adalah solusi terbaik dan satu-satunya bagi saya.
Ryan Coolwebs

8
.reload (true) atau .reload (false) tidak digunakan lagi sesuai dengan IDE saya dan github.com/Microsoft/TypeScript/issues/28898 - sekarang harus menggunakan .reload ()
danday74

390
location.reload();

Lihat halaman MDN ini untuk informasi lebih lanjut.

Jika Anda menyegarkan setelah suatu onclickmaka Anda harus mengembalikan false langsung setelah

location.reload();
return false;

23
apa perbedaan antara location.reload()dan window.location.reload()?
Raptor

54
@ShivanRaptor Biasanya tidak ada, dalam konteks web browser, locationadalah sama window.locationseperti windowadalah obyek global.
Lekensteyn

1
jangan lupa untuk return false;memanggil ini dari klik di tautan.
Rimian

2
Saya lebih suka menggunakan window.location.reload();untuk keterbacaan, karena locationbisa menjadi variabel lokal - sedangkan Anda biasanya akan menghindari variabel nama window.
Yeti

219

Berikut adalah 535 cara untuk memuat ulang halaman menggunakan JavaScript , yang paling mudah location = location.

Ini adalah 50 pertama:

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']
...

84
itu menarik, tapi sekarang saya bingung
Arun Prasad ES

14
Ini juga menyoroti kekhasan Javascript :)
Jeremy Thille

53
Saya pribadi tidak suka jawaban ini karena ini hanya menunjukkan beberapa implementasi yang berbeda untuk mengubah lokasi. Cara-cara ini adalah permutasi dari berbagai cara untuk menjalankan fungsi atau mengakses atribut dalam javascript. BUKAN cara berbeda untuk memuat ulang halaman.
Joshua Behrens

42
Tentu ada lebih banyak lagi, seperti:window.window.window['window'].location = window['window'].window['window']['window']['window']['window']['window']['window']['location']
Renato

85

Anda dapat melakukan tugas ini menggunakan window.location.reload();. Karena ada banyak cara untuk melakukan ini, tetapi saya pikir itu adalah cara yang tepat untuk memuat ulang dokumen yang sama dengan JavaScript. Berikut penjelasannya

window.locationObjek JavaScript dapat digunakan

  • untuk mendapatkan alamat halaman saat ini (URL)
  • untuk mengarahkan browser ke halaman lain
  • untuk memuat ulang halaman yang sama

window: dalam JavaScript mewakili jendela terbuka di browser.

location: di JavaScript menyimpan informasi tentang URL saat ini.

The locationobjek seperti fragmen dari windowobjek dan dipanggil melalui window.locationproperti.

location objek memiliki tiga metode:

  1. assign(): digunakan untuk memuat dokumen baru
  2. reload(): digunakan untuk memuat ulang dokumen saat ini
  3. replace(): digunakan untuk mengganti dokumen saat ini dengan yang baru

Jadi di sini kita perlu menggunakan reload(), karena dapat membantu kita memuat ulang dokumen yang sama.

Jadi gunakan seperti itu window.location.reload();.

Demo online di jsfiddle

Untuk meminta browser Anda mengambil halaman secara langsung dari server bukan dari cache, Anda dapat meneruskan trueparameter ke location.reload(). Metode ini kompatibel dengan semua browser utama, termasuk IE, Chrome, Firefox, Safari, Opera.


2
Ah ha! replace()ternyata menjadi solusi yang saya cari karena saya perlu memuat ulang halaman saya dengan sedikit perubahan pada string kueri.
Bernard Hymmen

Dari w3schools: "Perbedaan antara assign () dan replace (), adalah replace () menghapus URL dokumen saat ini dari riwayat dokumen, artinya tidak mungkin menggunakan tombol" kembali "untuk menavigasi kembali ke dokumen asli."
pasaba por aqui

54

Mencoba:

window.location.reload(true);

Parameter yang disetel ke 'true' memuat ulang salinan baru dari server. Membiarkannya keluar akan melayani halaman dari cache.

Informasi lebih lanjut dapat ditemukan di MSDN dan dalam dokumentasi Mozilla .


1
bagaimana jika saya ingin me-refresh halaman web eksternal www.xyz.com/abc?
Doit

@Dev: Anda harus mencoba dengan "ganti" seperti yang disebutkan kemudian
Jean Paul AKA el_vete

@Orane: Saya suka kesederhanaan dan akal dari jawaban ini khususnya, karena memberikan banyak pilihan hanya untuk memuaskan pertanyaan op, yang mengatakan, terima kasih telah memberikan tautan referensi yang berwenang dalam situasi ini juga, untuk referensi di masa depan karena setiap browser punya mesin JS sendiri untuk rendering ... Saya pikir pertanyaannya sangat umum dan harus bergantung pada apa yang ingin Anda lakukan, karena referensi web lain: " phpied.com/files/location-location/location- location.html "mungkin memuaskan sepenuhnya op untuk pertanyaan ini. Namun, yang satu ini membantu saya;)
Jean Paul AKA el_vete

1
Apakah ini masih benar? Kedua tautan tersebut tidak menyebutkan parameter apa pun untuk memuat ulang.
Rüdiger Schulz

51

Saya sedang mencari beberapa informasi tentang memuat ulang pada halaman yang diambil dengan permintaan POST, seperti setelah mengirimkan method="post"formulir.

Untuk memuat ulang halaman yang menyimpan data POST, gunakan:

window.location.reload();

Untuk memuat ulang halaman yang membuang data POST (melakukan permintaan GET), gunakan:

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

Semoga ini bisa membantu orang lain mencari informasi yang sama.


Terima kasih atas jawabannya termasuk referensi untuk memuat ulang dokumen yang diambil dengan POSTpermintaan.
Christopher Schultz

Perbedaan yang baik antara GETdan POSTmetode
Hassan Baig

Jawaban ini terlalu jauh ke bawah!
Greg Randall

1
window.location.href = window.location.hreftidak memuat ulang halaman jika url saat ini berisi a #. Anda dapat menghapus hash jika Anda tidak membutuhkannya window.location.href = window.location.href.split('#')[0];.
Roland Starke

41

Untuk memuat ulang halaman menggunakan JavaScript, gunakan:

window.location.reload();

37

Ini bekerja untuk saya:

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

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


Ini, bagi saya, lebih disukai, karena menghindari kondisi loop di sisi server
ILMostro_7

1
Saya sangat menghargai masuknya fungsi batas waktu karena saya memiliki pesan yang saya masih ingin dilihat sebelum penyegaran terjadi. Pujian!
Matt Cremeens

Anda dapat mengatur nilai yang berbeda sebagai argumen kedua ke fungsi setTimeout tetapi itu tidak akan berfungsi, memuat ulang akan terjadi dengan segera, bagaimana menyelesaikannya?
O.Kuz

1
@ O.Kuz tidak berpikir begitu. katakanlah jika Anda menetapkan nilai ke 5000 ms maka memuat ulang akan terjadi setelah 5 detik. lihat jsfiddle.net/umerqureshi/znruyzop/446
umer

1
Saya perlu menemukan kesalahan dalam kode saya) Terima kasih banyak!
O.Kuz

15

Jika Anda menempatkan

window.location.reload(true);

di awal halaman Anda tanpa syarat lain yang memenuhi syarat mengapa kode itu berjalan, halaman akan memuat dan kemudian melanjutkan memuat ulang sampai Anda menutup browser Anda.


Ya, atau sampai Anda membuka URL lain. Ini mungkin tergantung pada kemampuan browser untuk menangani pemuatan halaman yang berkelanjutan.
adamdunson

baik itu tergantung di mana Anda menempatkannya seperti yang telah Anda sebutkan dengan benar. Kami merujuk di sini hanya bahwa mungkin tag jangkar bukan elemen intuitif untuk melakukan tindakan seperti memuat ulang halaman. Saran: Kami mengandalkan objek UI lain sebagai target untuk melakukan acara onclick. Anda dapat melakukan ini di jQuery setelah halaman dimuat dengan menargetkan div, misalnya jika Anda menghiasnya dengan css .. Itu tergantung pada apa yang ingin Anda lakukan dengannya. Dalam konteks itu sebuah tombol daripada tombol tipe input. Jika kita tidak berencana meneruskan argumen ke aplikasi backend, sepertinya lebih tepat.
Jean Paul AKA el_vete

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

11
location.href = location.href;

5
Browser modern mengabaikan ini karena href tidak berubah sehingga tidak perlu memuat ulang. Anda harus menggunakan ini hanya sebagai failover untuk browser lama tanpa memuat ulang: (location.reload? Location.reload (): location.href = location.href)
Radek Pech

@ RadekPech Browser mana yang lebih tua tidak memiliki location.reload()?
Matthias

8

Untuk membuatnya mudah dan sederhana, gunakan location.reload(). Anda juga dapat menggunakan location.reload(true)jika Anda ingin mengambil sesuatu dari server.


8

Menggunakan tombol atau letakkan saja di dalam tag "a" (anchor):

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

Coba ini untuk kebutuhan lain:

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
menarik ... bagaimana dengan <button> </button>? kerjanya sama, kan?
Jean Paul AKA el_vete

1
Itu berhasil seperti pesona! Lihat jawaban saya di bawah ini :) Terima kasih
Jean Paul AKA el_vete


4

Muat ulang halaman secara otomatis setelah 20 detik.

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

4

Terima kasih, posting ini sangat membantu, tidak hanya memuat ulang halaman dengan jawaban yang disarankan, tetapi juga memberi saya ide untuk menempatkan ikon jQuery UI pada sebuah tombol:

<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>

Diedit untuk menunjukkan bagaimana ini terlihat ketika dimasukkan dalam proyek

2016-07-02

Permintaan maaf saya karena ini adalah proyek pribadi yang menyiratkan menggunakan jQuery UI, Themeroller, framework Ikon, metode seperti tab jQuery, tetapi ini dalam bahasa Spanyol;)


@Peter Mortensen: Terima kasih atas hasil editnya, prototipe proyek itu dilakukan untuk kuliah, jadi itu harus dalam bahasa Spanyol di screencaptures terlampir .. permintaan maaf saya untuk itu..Tentu saja, ada kebutuhan untuk memiliki beberapa inti terkait jQuery UI dependensi untuk membuatnya menyatu bersama seperti: --- misalnya widget ThemeRoller jqueryui.com/themeroller , dan plugin seperti: plugins.jquery.com/qTip2 , datatables.net .. perpustakaan jQuery sendiri, dll. tetapi tindakan dilakukan berdasarkan beberapa respons di atas: onclick = "javascript: window.location.reload (true);">!
Jean Paul AKA el_vete

3

Ini seharusnya bekerja:

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

atau

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

Saya lebih suka ini karena alasan berikut:

  • Menghapus bagian setelah #, memastikan halaman memuat ulang di browser yang tidak akan memuat ulang konten yang memilikinya.
  • Itu tidak menanyakan apakah Anda ingin memposting ulang konten terakhir jika Anda baru saja mengirimkan formulir.
  • Itu harus bekerja bahkan di sebagian besar browser terbaru. Diuji pada Firefox Terakhir dan Chrome.

Atau, Anda dapat menggunakan metode resmi terbaru untuk tugas ini

window.location.reload()

3

Gunakan tombol ini untuk menyegarkan halaman

DEMO

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

2

Metode reload () digunakan untuk memuat ulang dokumen saat ini.

Metode reload () melakukan hal yang sama dengan tombol reload di browser Anda.

Secara default, metode reload () memuat ulang halaman dari cache, tetapi Anda bisa memaksanya untuk memuat kembali halaman dari server dengan mengatur parameter forceGet ke true: location.reload (true).

        location.reload();

-3

Anda cukup menggunakan

window.location=document.URL

di mana document.URL mendapatkan URL halaman saat ini dan window.location memuatnya kembali.


2
Browser modern mengabaikan ini karena href tidak berubah sehingga tidak perlu memuat ulang. Anda harus menggunakan ini hanya sebagai failover untuk browser lama tanpa memuat ulang: (location.reload? Location.reload (): location = document.URL)
Radek Pech
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.