Periksa apakah laman dimuat ulang atau disegarkan dalam JavaScript

186

Saya ingin memeriksa ketika seseorang mencoba me-refresh halaman.

Sebagai contoh, ketika saya membuka halaman tidak ada yang terjadi tetapi ketika saya me-refresh halaman itu akan muncul peringatan.

javascript page-refresh Ahmed
sumber
1
Tidak mungkin tanpa kode sisi server. Untuk apa Anda membutuhkannya? Mungkin jika Anda memberikan gambaran yang lebih besar, kami dapat menyarankan alternatif yang lebih baik.
Shadow Wizard adalah Ear For You
Mungkin Anda bisa melakukan hal seperti itu dengan cookie ... seperti menyimpan waktu dan memuat ulang membandingkan perbedaan waktu.
Felix Kling
Saya ingin membuat seperti tautan facebook menjadi #! / Anythinge Saya ingin menghapus #! hanya saat memuat ulang halaman
Ahmed
1
@Ahmed Saya mencoba melakukan hal yang sama. Apakah ada solusi di bawah ini yang cocok untuk Anda?
Paul Fitzgerald
3
⚠️⚠️⚠️ window.performance.navigation.typesudah usang, mohon lihat jawaban saya .
Илья Зеленько

Jawaban:

221

⚠️⚠️⚠️ window.performance.navigation.typesudah usang, silakan lihat jawaban Илья Зеленько

Cara yang lebih baik untuk mengetahui bahwa halaman tersebut benar-benar dimuat ulang adalah dengan menggunakan objek navigator yang didukung oleh sebagian besar browser modern.

Ini menggunakan API Timing Navigasi .

//check for Navigation Timing API support
if (window.performance) {
  console.info("window.performance works fine on this browser");
}
  if (performance.navigation.type == 1) {
    console.info( "This page is reloaded" );
  } else {
    console.info( "This page is not reloaded");
  }
Luaskan cuplikan

sumber: https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API

Rahul Jain
sumber
1
Terima kasih sobat, ini adalah solusi akurat untuk mendeteksi apakah halaman dimuat ulang dari klik kanan / refresh dari browser atau dimuat ulang oleh url.
Roque Mejos
4
Sadarilah. Chrom baru-baru ini mengubah perilaku ini. Ketika pengguna mengklik bilah alamat saat ini dan tekan enter, nilai performance.navigation.type akan menjadi 1 yang harus 0. Saya menguji di Versi 56. Tidak yakin mengapa.
Jackwin tung
1
Cara kerjanya seperti yang diharapkan, interaksi apa pun dengan halaman yang memaksa status navigasi baru ke halaman yang sama dianggap menyegarkan. Jadi tergantung pada kode Anda ini sangat berguna, baik untuk mendaftar setiap kali halaman telah di-refresh, dimuat ulang atau interaksi ajax. Saya bisa memberikan ini banyak kegunaan untuk fungsionalitas dan analitik.
raphie
27
performance.navigation.type == performance.navigation.TYPE_RELOADlebih mudah dibaca daripada == 1. Juga, jika Anda memeriksa, performance.navigationAnda akan menemukan bahwa ada 4 jenis navigasi berbeda seperti TYPE_BACK_FORWARD,TYPE_NAVIGATE
Vitalij Kornijenko
5
⚠️⚠️⚠️ window.performance.navigation.typesudah usang, mohon lihat jawaban saya .
Илья Зеленько
37

Langkah pertama adalah memeriksa sessionStoragebeberapa nilai yang telah ditentukan sebelumnya dan jika ada pengguna lansiran:

if (sessionStorage.getItem("is_reloaded")) alert('Reloaded!');

Langkah kedua adalah menetapkan sessionStoragebeberapa nilai (misalnya true):

sessionStorage.setItem("is_reloaded", true);

Nilai sesi disimpan hingga halaman ditutup sehingga hanya akan berfungsi jika halaman dimuat ulang di tab baru dengan situs. Anda juga dapat terus menghitung ulang dengan cara yang sama.

DitherSky
sumber
28
Dua hal yang harus diperhatikan: 1). Anda hanya dapat menyimpan nilai string dalam sesi dan penyimpanan lokal. Karenanya truedikonversi ke "true". 2). Penyimpanan sesi berlanjut hingga pengguna menutup jendela browser, jadi Anda tidak bisa membedakan antara memuat ulang halaman dan menavigasi dari dan kembali ke situs Anda dalam sesi browser yang sama.
Hector
35

Standar baru 2018-sekarang (PerformanceNavigationTiming)

window.performance.navigationproperti tidak digunakan dalam spesifikasi Level 2 Navigasi Timing . Silakan gunakan PerformanceNavigationTimingantarmuka sebagai gantinya.

PerformanceNavigationTiming.type

Ini adalah teknologi eksperimental .

Periksa tabel kompatibilitas Browser dengan cermat sebelum menggunakannya dalam produksi.

Dukungan pada 2019-07-08

Properti read-only tipe mengembalikan string yang mewakili jenis navigasi. Nilai harus salah satu dari yang berikut:

  • navigasikan - Navigasi dimulai dengan mengklik tautan, memasukkan URL di bilah alamat browser, pengiriman formulir, atau menginisialisasi melalui operasi skrip selain memuat ulang dan back_forward seperti yang tercantum di bawah ini.

  • ulang - Navigasi adalah melalui operasi ulang browser atau location.reload().

  • back_forward - Navigasi adalah melalui operasi traversal riwayat browser.

  • prerender - Navigasi dimulai oleh petunjuk prerender .

Properti ini hanya Baca.

Contoh berikut menggambarkan penggunaan properti ini.

function print_nav_timing_data() {
  // Use getEntriesByType() to just get the "navigation" events
  var perfEntries = performance.getEntriesByType("navigation");

  for (var i=0; i < perfEntries.length; i++) {
    console.log("= Navigation entry[" + i + "]");
    var p = perfEntries[i];
    // dom Properties
    console.log("DOM content loaded = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
    console.log("DOM complete = " + p.domComplete);
    console.log("DOM interactive = " + p.interactive);

    // document load and unload time
    console.log("document load = " + (p.loadEventEnd - p.loadEventStart));
    console.log("document unload = " + (p.unloadEventEnd - p.unloadEventStart));

    // other properties
    console.log("type = " + p.type);
    console.log("redirectCount = " + p.redirectCount);
  }
}
Илья Зеленько
sumber
4
+1 untuk menunjukkan API yang sudah usang, tetapi -100 ke Apple karena kurangnya dukungan mereka di iOS hingga 2020
kinakuta
14

Simpan cookie saat pertama kali seseorang mengunjungi halaman tersebut. Saat refresh periksa apakah cookie Anda ada dan apakah ada, beri tahu.

function checkFirstVisit() {
  if(document.cookie.indexOf('mycookie')==-1) {
    // cookie doesn't exist, create it now
    document.cookie = 'mycookie=1';
  }
  else {
    // not first visit, so alert
    alert('You refreshed!');
  }
}

dan di tag tubuh Anda:

<body onload="checkFirstVisit()">
techfoobar
sumber
9
Bagaimana dengan pengguna yang kembali?
Red Taz
5
Seperti @ Rob2211 mengatakan ini hanya memeriksa apakah halaman telah dikunjungi dan dapat memberikan false positive selama halaman tersebut ditinjau kembali ketika cookie masih hidup. Jangan gunakan ini untuk memeriksa penyegaran.
Brannon
@Rannon - Cookie ini dibuat tanpa nilai kedaluwarsa dan akan dimusnahkan ketika browser ditutup.
techfoobar
1
@techfoobar tangkapan yang bagus. Bukankah ini masih menimbulkan masalah jika pengguna mengunjungi kembali situs tersebut sebelum cookie itu dihancurkan?
Brannon
3
@Rannon - Ya, jika browser dibiarkan terbuka dan pengguna kembali mengunjungi setelah beberapa waktu, itu tidak akan dianggap sebagai kunjungan baru.
techfoobar
7

jika 

event.currentTarget.performance.navigation.type

kembali

0 => pengguna baru saja mengetik dalam Url
1 => halaman dimuat ulang
2 => tombol kembali diklik.

nPcomp
sumber
Saya mendapatkan kesalahan ini, dapatkah Anda menjelaskannya lebih lanjut? Uncaught TypeError: Tidak dapat membaca properti 'target saat ini' yang tidak terdefinisi
Janatbek Sharsheyev
2 => TYPE_BACK_FORWARD Halaman diakses dengan menavigasi ke dalam sejarah. developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation
Tiago Freitas Leal Le
performance.navigation.typesudah usang, tolong lihat jawaban saya .
Илья Зеленько
6

Saya menemukan beberapa informasi di sini Javascript Detecting Page Refresh . Rekomendasi pertamanya adalah menggunakan bidang tersembunyi, yang cenderung disimpan melalui penyegaran halaman.

function checkRefresh() {
    if (document.refreshForm.visited.value == "") {
        // This is a fresh page load
        document.refreshForm.visited.value = "1";
        // You may want to add code here special for
        // fresh page loads
    } else {
        // This is a page refresh
        // Insert code here representing what to do on
        // a refresh
    }
}
<html>

<body onLoad="JavaScript:checkRefresh();">
    <form name="refreshForm">
        <input type="hidden" name="visited" value="" />
    </form>

</body>

</html>
Luaskan cuplikan

VoronoiPotato
sumber
Kami juga dapat memeriksa dengan memeriksa Refererproperti dan memodifikasi respons server berdasarkan pada properti ini
Adeel
Catatan sisi: metode pertama yang tercantum pada halaman itu akan gagal karena kode dieksekusi sebelum DOM telah diuraikan. Memindahkan <script>elemen ke bawah akan berhasil - tetapi itu masih bukan solusi yang dijamin (dan begitu pula metode cookie).
Andy E
1
@Adeel: memeriksa Refererjuga tidak dapat diandalkan; banyak proxy dan ekstensi browser menghapusnya dari permintaan.
Andy E
@VoronoiPotato Cobalah untuk meringkas informasi daripada hanya memposting tautan.
Dallin
1
Bagi saya, selalu mengeksekusi "jika" mengkondisikan dan tidak pernah mengeksekusi bagian "lain", tidak masalah apakah saya melakukan pemuatan halaman atau refresh halaman.
Parth Vora
6

Saya telah menulis fungsi ini untuk memeriksa kedua metode menggunakan lama window.performance.navigationdan baru performance.getEntriesByType("navigation")dalam waktu yang bersamaan:

function navigationType(){

    var result;
    var p;

    if (window.performance.navigation) {
        result=window.performance.navigation;
        if (result==255){result=4} // 4 is my invention!
    }

    if (window.performance.getEntriesByType("navigation")){
       p=window.performance.getEntriesByType("navigation")[0].type;

       if (p=='navigate'){result=0}
       if (p=='reload'){result=1}
       if (p=='back_forward'){result=2}
       if (p=='prerender'){result=3} //3 is my invention!
    }
    return result;
}

Deskripsi hasil:

0: mengklik tautan, Memasukkan URL di bilah alamat browser, pengiriman formulir, Mengklik bookmark, menginisialisasi melalui operasi skrip.

1: Mengklik tombol Muat Ulang atau menggunakanLocation.reload()

2: Bekerja dengan riwayat browser (Bakc dan Forward).

3: aktivitas pra-perenderan seperti<link rel="prerender" href="https://example.com/next-page.html">

4: metode lain.

Ali Sheikhpour
sumber
1

Saya menemukan beberapa informasi di sini Javascript Detecting Page Refresh

function UnLoadWindow() {
    return 'We strongly recommends NOT closing this window yet.'
}

window.onbeforeunload = UnLoadWindow;
Ramah
sumber
3
dimana "di sini"? apakah Anda lupa tautannya?
ᴄʀᴏᴢᴇᴛ
0 
if(sessionStorage.reload) { 
   sessionStorage.reload = true;
   // optionnal
   setTimeout( () => { sessionStorage.setItem('reload', false) }, 2000);
} else {
   sessionStorage.setItem('reload', false);
}
Alexis Gatuingt
sumber