Bagaimana saya bisa me-refresh halaman dengan jQuery?

Bagaimana saya bisa me-refresh halaman dengan jQuery?

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.

Ini harus bekerja di semua browser bahkan tanpa jQuery:

location.reload();

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>

Banyak cara akan berhasil, saya kira:

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

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 .

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.

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.

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.

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.

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.

Fungsi jQuery Loadjuga dapat melakukan penyegaran halaman:

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

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);
});

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

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.

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>

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();

menggunakan

location.reload();

atau

window.location.reload();

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>

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

Semua jawaban di sini baik. Karena pertanyaan menentukan tentang memuat ulang laman denganjquery, 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 jquery, atau jquery berdasarkan pada javascript. Jadi pergi dengan murnijavascript jauh lebih baik dalam hal hal-hal sederhana.

Tetapi jika Anda membutuhkan jquery solusi, ini satu.

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

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

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

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

Solusi Javascript Sederhana:

 location = location; 

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

Mungkin terpendek (12 karakter) - gunakan riwayat

history.go()

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

Ini terpendek dalam JavaScript.

window.location = '';

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

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>