Bagaimana saya bisa me-refresh halaman dengan jQuery?


2453

Bagaimana saya bisa me-refresh halaman dengan jQuery?


29
Karena jQuery adalah kerangka kerja javascript untuk manipulasi DOM dan pengikatan acara yang mudah, saya akan merekomendasikan Anda untuk meminta javascript alih-alih jQuery.
WoIIe

19
Anda tidak perlu jQuery untuk ini.
Stardust

13
Lebih relevan dari sebelumnya: needsmorejquery.com
Kartik Chugh

@Stardust Anda tidak perlu jQuery untuk apa pun yang Anda lakukan dengan jQuery karena semuanya mungkin dengan JavaScript jika Anda dapat melakukannya jQuery.
Saya Orang yang Paling Bodoh

Jawaban:


3828

Gunakan location.reload():

$('#something').click(function() {
    location.reload();
});

The reload()fungsi mengambil parameter opsional yang dapat diatur untuk trueuntuk memaksa ulang dari server daripada cache. Parameter default untuk false, jadi secara default halaman dapat memuat ulang dari cache browser.


29
Ini tidak berhasil untuk saya. Ini berhasil meskipun: window.location.href = window.location.href;
Yster

5
Ini tidak berhasil untuk saya. window.location.href=window.location.href;dan location.href=location.href;bekerja.
twharmon

23
window.location.reload(true);akan susah menyegarkan, jika tidak maka itu salah
Sagar Naliyapara

@ Sagar N, ini bekerja juga untuk saya. Terima kasih. Saya berusaha keras beberapa hari terakhir dengan pendekatan yang berbeda tetapi solusi Anda menyelamatkan saya.
Ludus H

1
@FaridAbbas location.reload();adalah javascript standar. Anda tidak perlu jQuery untuk itu.
Mark Baijens

457

Ini harus bekerja di semua browser bahkan tanpa jQuery:

location.reload();

450

Ada beberapa cara tak terbatas untuk menyegarkan halaman dengan JavaScript:

  1. location.reload()
  2. history.go(0)
  3. location.href = location.href
  4. location.href = location.pathname
  5. location.replace(location.pathname)
  6. location.reload(false)

    Jika kami perlu menarik dokumen dari server-web lagi (seperti di mana konten dokumen berubah secara dinamis) kami akan meneruskan argumen sebagai true.

Anda dapat melanjutkan daftar menjadi kreatif:

  • window.location = window.location
  • window.self.window.self.window.window.location = window.location
  • ... dan 534 cara lainnya

var methods = [
  "location.reload()",
  "history.go(0)",
  "location.href = location.href",
  "location.href = location.pathname",
  "location.replace(location.pathname)",
  "location.reload(false)"
];

var $body = $("body");
for (var i = 0; i < methods.length; ++i) {
  (function(cMethod) {
    $body.append($("<button>", {
      text: cMethod
    }).on("click", function() {
      eval(cMethod); // don't blame me for using eval
    }));
  })(methods[i]);
}
button {
  background: #2ecc71;
  border: 0;
  color: white;
  font-weight: bold;
  font-family: "Monaco", monospace;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.5s ease;
  margin: 2px;
}
button:hover {
  background: #27ae60;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


10
+1 untuk daftar dan jsfiddle. Saya punya pertanyaan, di jsfiddle 1 dan 6 membuat halaman yang dihasilkan menghilang sejenak karena sedang dimuat ulang, dan 2-5 membuat memuat ulang halaman menjadi "tidak terlihat". Dalam alat dev di chrome saya bisa melihat halaman sedang dibuat ulang, tetapi bisakah Anda menjelaskan proses menggambar ulang menjadi defferent? silahkan. Terima kasih sebelumnya.
Cԃ ա ԃ

@ Cԃ ա ԃ Saya tidak melihat perbedaan ... Mungkin cache adalah masalahnya? Saya akan memeriksanya segera.
Ionică Bizău

2
1 dan 6 (reload()/(false))lebih lambat. hmmm. menarik. :) dan 1 dan 6 sama dengan reload()parameter defaultnya false.
Cԃ ա ԃ

location.href = location.hrefadalah apa yang biasanya saya gunakan, tetapi terima kasih untuk yang lain. Sangat berguna! +1
Amal Murali

1
@ Cԃ ա ԃ Akhirnya saya dapat mereproduksi apa yang Anda lihat dan saya bertanya di sini .
Ionică Bizău

202

Banyak cara akan berhasil, saya kira:

  • window.location.reload();
  • history.go(0);
  • window.location.href=window.location.href;

41
Ini window.location.href=window.location.href;tidak akan melakukan apa - apa jika URL Anda memiliki # / hashbang di bagian akhir example.com/something#blah:
AaronLS

18
Jika ada yang bertanya-tanya apa perbedaan antara location.reload()dan history.go(0)adalah: tidak ada. Bagian yang relevan dari spesifikasi HTML 5 di w3.org/TR/html5/browsers.html#dom-history-go secara eksplisit menentukan bahwa mereka setara: "Ketika go(delta)metode dipanggil, jika argumen ke metode dihilangkan atau memiliki nilai nol, agen pengguna harus bertindak seolah-olah location.reload()metode itu dipanggil. "
Mark Amery

Satu-satunya yang bekerja untuk saya adalah ini: window.location.href = window.location.href;
Yster

123

Untuk memuat ulang halaman dengan jQuery, lakukan:

$.ajax({
    url: "",
    context: document.body,
    success: function(s,x){
        $(this).html(s);
    }
});

Pendekatan di sini yang saya gunakan adalah Ajax jQuery. Saya mengujinya di Chrome 13. Kemudian saya memasukkan kode di handler yang akan memicu memuat ulang. The URL adalah "", yang berarti halaman ini .


68
Downvoting. Ini tidak benar-benar menjawab pertanyaan, tetapi malah menunjukkan cara mengganti HTML halaman dengan respons Ajax. Itu berbeda dari memuat ulang halaman: misalnya, saya sedang bekerja dengan situasi saat ini di mana ini tidak akan bekerja untuk menyelesaikan masalah aslinya.
Marnen Laibow-Koser

5
Salah satu masalah dengan memuat ulang seluruh HTML seperti ini adalah harus memanggil aktivitas onload / siap secara manual dan mengurangi penimpaan variabel yang sebelumnya dinyatakan yang keadaannya ingin Anda pertahankan setelah penyegaran.
PassKit

3
Kecuali Anda sangat berhati-hati dengan kode Anda, ini akan menyebabkan kebocoran memori di mana Anda telah melampirkan penangan acara dan semacamnya tanpa melepaskan mereka sebelum mengganti kode yang dilampirkan.
Daniel Llewellyn

Saya menggunakan ini untuk memuat ulang dasbor kami setiap detik, nol flicker! Ini api komet orang miskin. Terima kasih kepada @DanielLlewellyn et al. untuk peringatan.
William Entriken

3
Beberapa orang berkomentar bahwa pendekatan ini berguna untuk menyegarkan hanya sebagian halaman. Bukan itu. Saya pikir orang-orang itu salah paham tentang contextparameter $.ajaxdan mengharapkannya entah bagaimana melakukan semacam sihir. Yang dilakukannya hanyalah mengatur thisnilai fungsi panggilan balik . Ajax ke URL ""akan mengenai URL Anda saat ini, sehingga biasanya memuat HTML lengkap (termasuk <html>dan <head>dan <body>), dan tidak ada dalam jawaban ini yang menyaring hal-hal yang tidak Anda inginkan.
Mark Amery

107

Jika halaman saat ini dimuat oleh permintaan POST, Anda mungkin ingin menggunakan

window.location = window.location.pathname;

dari pada

window.location.reload();

karena window.location.reload()akan meminta konfirmasi jika dipanggil pada halaman yang dimuat oleh permintaan POST.


12
Ini akan kehilangan querystring, sedangkan window.location = window.location tidak akan
mrmillsy

@ mrmillsy window.location = window.locationjuga tidak sempurna; ia tidak melakukan apa-apa jika ada fragmen (hashbang) di URL saat ini.
Mark Amery

64

Pertanyaannya seharusnya,

Cara me-refresh halaman dengan JavaScript

window.location.href = window.location.href; //This is a possibility
window.location.reload(); //Another possiblity
history.go(0); //And another

Anda dimanja oleh pilihan.


55

Anda mungkin ingin menggunakan

location.reload(forceGet)

forceGet adalah boolean dan opsional.

Defaultnya salah yang memuat ulang halaman dari cache.

Setel parameter ini menjadi true jika Anda ingin memaksa browser untuk mendapatkan halaman dari server untuk menyingkirkan cache juga.

Atau hanya

location.reload()

jika Anda ingin cepat dan mudah dengan caching.


41

Tiga pendekatan dengan perilaku terkait cache yang berbeda:

  • location.reload(true)

    Di browser yang menerapkan forcedReloadparameter location.reload(), reload dengan mengambil salinan halaman baru dan semua sumber dayanya (skrip, stylesheet, gambar, dll.). Tidak akan menayangkan sumber daya apa pun dari cache - mendapat salinan baru dari server tanpa mengirim if-modified-sinceatauif-none-match header dalam permintaan.

    Setara dengan pengguna yang melakukan "pemuatan ulang" di peramban jika memungkinkan.

    Perhatikan bahwa meneruskan trueke location.reload()didukung di Firefox (lihat MDN ) dan Internet Explorer (lihat MSDN ) tetapi tidak didukung secara universal dan bukan bagian dari spesifikasi W3 HTML 5 , atau spesifikasi W3 draft HTML 5.1 , atau Standar Hidup WHATWG HTML .

    Di browser yang tidak didukung, seperti Google Chrome, location.reload(true)berperilaku sama dengan location.reload().

  • location.reload() atau location.reload(false)

    Muat ulang halaman, mengambil salinan HTML halaman baru yang tidak di-cache itu sendiri, dan melakukan permintaan validasi ulang RFC 7234 untuk sumber daya apa pun (seperti skrip) yang telah di-cache oleh browser, bahkan jika masih baru , RFC 7234 mengizinkan browser untuk melayani mereka tanpa validasi ulang.

    Bagaimana tepatnya browser harus menggunakan cache ketika melakukan location.reload()panggilan tidak ditentukan atau didokumentasikan sejauh yang saya tahu; Saya menentukan perilaku di atas dengan eksperimen.

    Ini sama dengan pengguna hanya dengan menekan tombol "refresh" di browser mereka.

  • location = location (atau tak terhingga banyaknya teknik lain yang mungkin melibatkan penetapan location atau untuk propertinya)

    Hanya berfungsi jika URL halaman tidak mengandung fragmen / hashbang!

    Ulang halaman tanpa refetching atau revalidating setiap segar sumber dari cache. Jika HTML halaman itu sendiri segar, ini akan memuat ulang halaman tanpa melakukan permintaan HTTP sama sekali.

    Ini setara (dari perspektif caching) untuk pengguna yang membuka halaman di tab baru.

    Namun, jika URL halaman berisi hash, ini tidak akan berpengaruh.

    Sekali lagi, perilaku caching di sini tidak ditentukan sejauh yang saya tahu; Saya menentukannya dengan pengujian.

Jadi, secara ringkas, Anda ingin menggunakan:

  • location = locationuntuk penggunaan cache yang maksimal, selama halaman tersebut tidak memiliki hash dalam URL-nya, dalam hal ini ini tidak akan berfungsi
  • location.reload(true)untuk mengambil salinan baru dari semua sumber daya tanpa memvalidasi ulang (meskipun tidak didukung secara universal dan tidak akan berperilaku berbeda location.reload()di beberapa browser, seperti Chrome)
  • location.reload() untuk mereproduksi efek pengguna mengklik tombol 'segarkan' dengan setia.

+1 untuk lokasi = lokasi; tampaknya tidak banyak orang yang menyarankannya meskipun lebih pendek dari sebagian besar jawaban yang diberikan, satu-satunya downside adalah keterbacaan saya kira sedangkan location.reload () sedikit lebih semantik
Brandito

@Brandito Lebih penting lagi, location = locationtidak berfungsi jika ada hash di URL. Untuk situs apa pun yang menggunakan fragmen - atau bahkan untuk situs mana pun yang ditautkan oleh seseorang dengan suatu halaman dapat menambahkan fragid ke URL - yang membuatnya rusak.
Mark Amery

26

window.location.reload() akan memuat ulang dari server dan akan memuat semua data, skrip, gambar, dll. lagi.

Jadi jika Anda hanya ingin me-refresh HTML, window.location = document.URLakan kembali lebih cepat dan dengan lalu lintas lebih sedikit. Tapi itu tidak akan memuat ulang halaman jika ada hash (#) di URL.


Perilaku ini benar di Chrome, setidaknya - location.reload()memaksa validasi ulang sumber daya yang di-cache, bahkan tanpa argumen, sementara dengan window.location = document.URLsenang hati melayani sumber daya yang di-cache tanpa mengenai server selama mereka masih baru.
Mark Amery

17

Fungsi jQuery Loadjuga dapat melakukan penyegaran halaman:

$('body').load('views/file.html', function () {
    $(this).fadeIn(5000);
});

4
Tidak, ini bukan refresh halaman.
Mark Amery

16

Karena pertanyaannya umum, mari kita simpulkan solusi yang mungkin untuk jawabannya:

Solusi JavaScript sederhana :

Cara termudah adalah solusi satu baris yang ditempatkan dengan cara yang tepat:

location.reload();

Apa yang banyak orang hilang di sini, karena mereka berharap mendapatkan "poin" adalah bahwa fungsi reload () sendiri menawarkan Boolean sebagai parameter (detail: https://developer.mozilla.org/en-US/docs/Web / API / Lokasi / memuat ulang ).

Metode Location.reload () memuat ulang sumber daya dari URL saat ini. Parameter unik opsionalnya adalah Boolean, yang bila benar, menyebabkan halaman selalu dimuat ulang dari server. Jika salah atau tidak ditentukan, browser dapat memuat ulang halaman dari cache.

Ini berarti ada dua cara:

Solusi1: Paksa memuat ulang halaman saat ini dari server

location.reload(true);

Solution2: Reload dari cache atau server (berdasarkan browser dan konfigurasi Anda)

location.reload(false);
location.reload();

Dan jika Anda ingin menggabungkannya dengan jQuery dan mendengarkan acara, saya akan merekomendasikan menggunakan metode ".on ()" alih-alih ".click" atau pembungkus acara lainnya, misalnya solusi yang lebih tepat adalah:

$('#reloadIt').on('eventXyZ', function() {
    location.reload(true);
});

15

Ini adalah solusi yang secara tidak sinkron memuat ulang suatu halaman menggunakan jQuery. Ini menghindari flicker yang disebabkan oleh window.location = window.location. Contoh ini menunjukkan halaman yang memuat ulang secara terus-menerus, seperti di dasbor. Ini adalah pertarungan teruji dan berjalan di TV layar informasi di Times Square.

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <meta http-equiv="refresh" content="300">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script>
    function refresh() {
      $.ajax({
        url: "",
        dataType: "text",
        success: function(html) {
          $('#fu').replaceWith($.parseHTML(html));
          setTimeout(refresh,2000);
        }
      });
    }
    refresh();
    </script>
  </head>
  <body>
    <div id="fu">
      ...
    </div>
  </body>
</html>

Catatan:

  • Penggunaan $.ajaxsecara langsung seperti $.get('',function(data){$(document.body).html(data)}) menyebabkan file css / js rusak , bahkan jika Anda menggunakan cache: true, itu sebabnya kami menggunakanparseHTML
  • parseHTMLTIDAK akan menemukan bodytag sehingga seluruh tubuh Anda perlu masuk div tambahan, saya harap nugget pengetahuan ini membantu Anda suatu hari, Anda dapat menebak bagaimana kami memilih id untuk itudiv
  • Gunakan http-equiv="refresh"kalau-kalau ada yang tidak beres dengan javascript / server cegukan, maka halaman akan MASIH reload tanpa Anda mendapat panggilan telepon
  • Pendekatan ini mungkin bocor entah bagaimana, http-equivpenyegaran memperbaikinya

14

saya menemukan

window.location.href = "";

atau

window.location.href = null;

juga membuat refresh halaman.

Ini membuatnya jauh lebih mudah untuk memuat ulang halaman menghapus hash. Ini sangat bagus ketika saya menggunakan AngularJS di simulator iOS, sehingga saya tidak perlu menjalankan ulang aplikasi.


Tembakan yang bagus, saya tidak menyadarinya.
Junaid Atari

9

Anda dapat menggunakan metode JavaScript location.reload() . Metode ini menerima parameter boolean. trueatau false. Jika parameternya true; halaman selalu dimuat ulang dari server. Jika memangfalse ; yang merupakan default atau dengan browser parameter kosong memuat ulang halaman dari cache itu.

Dengan trueparameter

<button type="button" onclick="location.reload(true);">Reload page</button>

Dengan default/ falseparameter

 <button type="button" onclick="location.reload();">Reload page</button>

Menggunakan jquery

<button id="Reloadpage">Reload page</button>
<script type="text/javascript">
    $('#Reloadpage').click(function() {
        location.reload();
    }); 
</script>

8

Anda tidak memerlukan apa pun dari jQuery, untuk memuat ulang laman menggunakan JavaScript murni , cukup gunakan fungsi muat ulang di properti lokasi seperti ini:

window.location.reload();

Secara default, ini akan memuat ulang halaman menggunakan cache browser (jika ada) ...

Jika Anda ingin melakukan pemuatan paksa halaman, cukup berikan nilai sebenarnya untuk memuat kembali metode seperti di bawah ini ...

window.location.reload(true);

Juga jika Anda sudah dalam lingkup jendela , Anda dapat menyingkirkan jendela dan melakukan:

location.reload();

8

menggunakan

location.reload();

atau

window.location.reload();

OP disebutkan secara khusus "dengan jQuery" (meskipun sebagaimana telah dicatat oleh banyak orang, ini mungkin harus tidak menjadi pertanyaan jQuery)
RomainValeri

3

Gunakan onclick="return location.reload();"di dalam tag tombol.

<button id="refersh-page" name="refersh-page" type="button" onclick="return location.reload();">Refesh Page</button>

3

Jika Anda menggunakan jQuery dan ingin menyegarkan, cobalah menambahkan jQuery Anda dalam fungsi javascript:

Saya ingin menyembunyikan iframe dari halaman saat mengklik oh h3, bagi saya itu berfungsi tetapi saya tidak dapat mengklik item yang memungkinkan saya untuk melihatiframe permulaan kecuali saya me-refresh browser secara manual ... tidak ideal.

Saya mencoba yang berikut ini:

var hide = () => {
    $("#frame").hide();//jQuery
    location.reload(true);//javascript
};

Mencampur javascript Jane sederhana dengan jQuery Anda akan berhasil.

// code where hide (where location.reload was used)function was integrated, below    
    iFrameInsert = () => {
        var file = `Fe1FVoW0Nt4`;
        $("#frame").html(`<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/${file}\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe><h3>Close Player</h3>`);
        $("h3").enter code hereclick(hide);
}

// View Player 
$("#id-to-be-clicked").click(iFrameInsert);

3

Semua jawaban di sini baik. Karena pertanyaan menentukan tentang memuat ulang laman dengan, Saya hanya berpikir menambahkan sesuatu yang lebih untuk pembaca masa depan.

jQuery adalah pustaka JavaScript lintas platform yangdirancang untuk menyederhanakan skrip HTML sisi klien.

~ Wikipedia ~

Jadi Anda akan mengerti bahwa fondasi , atau berdasarkan pada . Jadi pergi dengan murni jauh lebih baik dalam hal hal-hal sederhana.

Tetapi jika Anda membutuhkan solusi, ini satu.

$(location).attr('href', '');

2

Ada banyak cara untuk memuat ulang halaman saat ini, tetapi entah bagaimana menggunakan pendekatan itu Anda dapat melihat halaman diperbarui tetapi tidak dengan beberapa nilai cache akan ada di sana, jadi atasi masalah itu atau jika Anda ingin membuat permintaan yang sulit maka gunakan kode di bawah ini.

    location.reload(true);
    //Here, it will make a hard request or reload the current page and clear the cache as well.


    location.reload(false); OR location.reload();
    //It can be reload the page with cache

2
<i id="refresh" class="fa fa-refresh" aria-hidden="true"></i>

<script>
$(document).on('click','#refresh',function(){
   location.reload(true);
});
</script>

Sudah ada beberapa jawaban yang menyarankan ini.
Dharman

Luar biasa ini juga diperbarui dari server
Alemoh Rapheal Baja

1

Solusi Javascript Sederhana:

 location = location; 

<button onClick="location = location;">Reload</button>



1

Anda dapat menulisnya dengan dua cara. 1 adalah cara standar memuat ulang laman yang juga disebut penyegaran sederhana

location.reload(); //simple refresh

Dan yang lainnya disebut hard refresh . Di sini Anda melewatkan ekspresi boolean dan mengaturnya menjadi true. Ini akan memuat ulang halaman yang menghancurkan cache yang lebih lama dan menampilkan konten dari awal.

location.reload(true);//hard refresh

1
Jawaban khusus kode hanya disukai pada situs ini. Bisakah Anda mengedit jawaban Anda untuk memasukkan beberapa komentar atau penjelasan kode Anda? Penjelasan harus menjawab pertanyaan seperti: Apa fungsinya? Bagaimana cara melakukannya? Kemana perginya? Bagaimana cara mengatasi masalah OP? Lihat: Bagaimana cara anwser . Terima kasih!
Eduardo Baitello


0
$(document).on("click", "#refresh_btn", function(event) 
{
     window.location.replace(window.location.href);
});

-1

Berikut adalah beberapa baris kode yang dapat Anda gunakan untuk memuat ulang halaman menggunakan jQuery .

Ia menggunakan pembungkus jQuery dan mengekstrak elemen dom asli.

Gunakan ini jika Anda hanya ingin perasaan jQuery pada kode Anda dan Anda tidak peduli tentang kecepatan / kinerja kode.

Pilih saja dari 1 hingga 10 yang sesuai dengan kebutuhan Anda atau tambahkan beberapa lagi berdasarkan pola dan jawaban sebelum ini.

<script>
  $(location)[0].reload(); //1
  $(location).get(0).reload(); //2
  $(window)[0].location.reload(); //3
  $(window).get(0).location.reload(); //4
  $(window)[0].$(location)[0].reload(); //5
  $(window).get(0).$(location)[0].reload(); //6
  $(window)[0].$(location).get(0).reload(); //7
  $(window).get(0).$(location).get(0).reload(); //8
  $(location)[0].href = ''; //9
  $(location).get(0).href = ''; //10
  //... and many other more just follow the pattern.
</script>
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.