186

Birisi sayfayı yenilemeye çalıştığında kontrol etmek istiyorum.

Örneğin, bir sayfayı açtığımda hiçbir şey olmuyor ama sayfayı yenilediğimde bir uyarı göstermesi gerekiyor.

javascript page-refresh

— Ahmed
kaynak

1

Sunucu tarafı kodu olmadan gerçekten mümkün değil. Bunun için neye ihtiyacın var? Belki daha büyük resmi verirseniz daha iyi bir alternatif önerebiliriz.

— Gölge Sihirbazı Senin için Kulak

Belki bir kurabiyeyle böyle bir şey yapabilirsiniz ... zaman depolamak ve yeniden yükleme gibi zaman farkını karşılaştırmak gibi.

— Felix Kling

Facebook bağlantısı gibi yapmak istiyorum #! / Şey kaldırmak istiyorum #! yalnızca sayfa yeniden yüklendiğinde

— Ahmed

1

@Ahmed Aynı şeyi yapmaya çalışıyorum. Aşağıdaki çözümlerden herhangi biri işe yaradı mı?

— Paul Fitzgerald

3

⚠️⚠️⚠️ window.performance.navigation.typekullanımdan kaldırıldı, lütfen cevabımı görün .

— Илья Зеленько

221

⚠️⚠️⚠️ window.performance.navigation.typekullanımdan kaldırıldı, lütfen Илья Зеленько'ın cevabına bakın

Sayfanın gerçekten yeniden yüklendiğini bilmenin daha iyi bir yolu, çoğu modern tarayıcı tarafından desteklenen gezgin nesnesini kullanmaktır.

Navigasyon Zamanlama API'sını kullanır .

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

Snippet'i genişlet

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

— Rahul Jain
kaynak

1

teşekkürler dostum bu sayfanın tarayıcıdan sağ tıklama / yenileme veya url tarafından yeniden yüklendiğini tespit etmek için doğru bir çözümdür.

— Roque Mejos

4

Chrome son zamanlarda bu davranışı değiştirmişti. Kullanıcı geçerli adres çubuğuna tıklayıp enter tuşuna bastığında, performance.navigation.type değeri 0 olmalıdır. Bu 0 olmalıdır. Sürüm 56'da test ettim. Neden olduğundan emin değilim.

— Jackwin

1

Çalışma şekli beklendiği gibi, yeni bir gezinme durumunu aynı sayfaya zorlayan sayfa ile herhangi bir etkileşim bir yenileme olarak kabul edilir. Bu nedenle, kodunuza bağlı olarak, sayfanın her yenilendiğinde, yeniden yüklendiğinde veya herhangi bir ajax etkileşimi için kaydolmak son derece yararlıdır. Bunu işlevsellikler ve analitik için çok fazla kullanım verebilirim.

— raphie

27

performance.navigation.type == performance.navigation.TYPE_RELOADyerine okumak daha kolaydır == 1. Ayrıca, kontrol performance.navigationederseniz, 4 farklı navigasyon türü olduğunu göreceksiniz TYPE_BACK_FORWARD,TYPE_NAVIGATE

— Vitalij Kornijenko

5

⚠️⚠️⚠️ window.performance.navigation.typekullanımdan kaldırıldı, lütfen cevabımı görün .

— Илья Зеленько

37

İlk adım, sessionStorageönceden tanımlanmış bir değer olup olmadığını kontrol etmektir ve varsa uyarı kullanıcısı:

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

İkinci adım, bir sessionStoragedeğere ayarlamaktır (örneğin true):

sessionStorage.setItem("is_reloaded", true);

Oturum değerleri sayfa kapatılana kadar tutulur, böylece sayfa siteyle yeni bir sekmede yeniden yüklendiğinde çalışır. Yeniden yükleme sayısını da aynı şekilde tutabilirsiniz.

— DitherSky
kaynak

28

Dikkat edilmesi gereken iki şey: 1). Dize değerlerini yalnızca oturumda ve yerel depolama alanında depolayabilirsiniz. Bu nedenle true, dönüştürülür "true". 2). Oturum depolama alanı, kullanıcı tarayıcı penceresini kapatana kadar devam eder, böylece aynı tarayıcı oturumunda sayfanın yeniden yüklenmesi ile sitenizden sitenize veya sitenize geri dönme arasındaki farkı söyleyemezsiniz.

— Hector

35

2018'de yeni standart (PerformanceNavigationTiming)

window.performance.navigationmülkiyet olduğu kaldırılmış içinde Navigation Timing Düzey 2 şartname. Lütfen PerformanceNavigationTimingbunun yerine arayüzü kullanın.

PerformanceNavigationTiming.type

Bu deneysel bir teknolojidir .

Bunu üretimde kullanmadan önce Tarayıcı uyumluluk tablosunu dikkatlice kontrol edin .

2019-07-08 desteği

Type salt okunur özelliği, gezinme türünü temsil eden bir dize döndürür. Değer aşağıdakilerden biri olmalıdır:

navigate - Gezinme, bir bağlantıyı tıklatarak, tarayıcının adres çubuğuna URL'yi girerek, form göndererek veya aşağıda listelendiği gibi yeniden yükleme ve back_forward dışında bir komut dosyası işlemiyle başlatılarak başlatılır.
yeniden yükle - Gezinme, tarayıcının yeniden yükleme işleminden veya location.reload().
back_forward - Gezinme, tarayıcının geçmiş tarama işleminden geçer.
prerender - Gezinme bir ön ipucu ile başlatılır .

Bu tesis Salt Okunur'dur.

Aşağıdaki örnek, bu özelliğin kullanımını göstermektedir.

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

— Илья Зеленько
kaynak

4

Kullanımdan kaldırılmış API'yı işaret eden +1, ancak iOS'ta destek eksikliği nedeniyle

— -100'ü Apple'a

14

Birisi sayfayı ilk ziyaret ettiğinde bir çerez saklayın. Yenilemede, çerezinizin var olup olmadığını kontrol edin ve varsa uyarın.

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

ve vücut etiketinizde:

<body onload="checkFirstVisit()">

— techfoobar
kaynak

9

Geri dönen kullanıcılara ne olacak?

— Red Taz

5

@ Rob2211'in söylediği gibi, bu yalnızca sayfanın ziyaret edilip edilmediğini kontrol eder ve çerez hala hayatta olduğunda sayfa tekrar ziyaret edildiği sürece yanlış pozitif verebilir. Yenilemeyi kontrol etmek için bunu kullanmayın.

— Brannon

@Brannon - Çerez herhangi bir süre sonu değeri olmadan oluşturulur ve tarayıcı kapatıldığında yok edilir.

— techfoobar

1

@techfoobar güzel yakala. Bu çerez yok edilmeden önce kullanıcı siteyi tekrar ziyaret ederse, bu yine de sorun teşkil etmez mi?

— Brannon

3

@Brannon - Evet, tarayıcı açık bırakılırsa ve kullanıcı bir süre sonra tekrar ziyaret ederse, yeni bir ziyaret olarak kabul edilmez.

— techfoobar

7

Eğer

event.currentTarget.performance.navigation.type

İadeler

0 => kullanıcı bir URL
1 yazdı => sayfa yeniden yüklendi
2 => geri düğmesi tıklandı.

— nPcomp
kaynak

Bu hatayı aldım, daha fazla açıklayabilir misiniz? Uncaught TypeError: undefined'in 'currentTarget' özelliği okunamıyor

— Janatbek Sharsheyev

2 => TYPE_BACK_FORWARD Sayfaya geçmişe giderek erişildi. developer.mozilla.org/tr-TR/docs/Web/API/PerformanceNavigation

— Tiago Freitas Leal

performance.navigation.typekullanımdan kaldırıldı, pls cevabımı gör .

— Илья Зеленько

6

Burada bazı bilgiler buldum Javascript Tespit Sayfa Yenileme . İlk önerisi, sayfa yenilemelerinde saklanma eğiliminde olan gizli alanları kullanmaktır.

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>

Snippet'i genişlet

— VoronoiPotato
kaynak

Ayrıca, Refererözelliği kontrol ederek bu özelliği temel alarak sunucu yanıtını değiştirebiliriz

— Adeel

Yan not: DOM ayrıştırılmadan önce kod yürütüldüğünden bu sayfada listelenen ilk yöntem başarısız olur. <script>Öğeyi alta taşımak işe yarayabilir - ancak yine de garantili bir çözüm değildir (ve her ikisi de çerez yöntemi değildir).

— Andy E

1

@Adeel: kontrol Refererde güvenilir değil; birçok proxy ve tarayıcı uzantısı isteklerden çıkarır.

— Andy E

@VoronoiPotato Lütfen yalnızca bağlantı göndermek yerine bilgileri özetlemeye çalışın.

— Dallin

1

Benim için her zaman "if" koşulunu yürütür ve asla "else" bölümünü yürütmez, sayfa yükleme veya sayfa yenileme yaptığım fark etmez.

— Parth Vora

6

Ben eski window.performance.navigationve yeni performance.getEntriesByType("navigation")aynı anda kullanarak her iki yöntemi kontrol etmek için bu işlevi yazdım :

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

Sonuç açıklaması:

0: bir bağlantıyı tıklatma, URL'yi tarayıcının adres çubuğuna girme, form gönderme, Yer işaretini tıklama, bir komut dosyası işlemiyle başlatma.

1: Yeniden Yükle düğmesini tıklamak veyaLocation.reload()

2: Tarayıcı geçmişi ile çalışma (Bakc ve İleri).

3: gibi ön etkinlik<link rel="prerender" href="https://stackoverflow.com//example.com/next-page.html">

4: başka herhangi bir yöntem.

— Ali Şeyhpour
kaynak

1

Burada bazı bilgiler buldum Javascript Tespit Sayfası Yenile

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

window.onbeforeunload = UnLoadWindow;

— Manpreet
kaynak

3

Burası neresi" ? bağlantıyı unuttun mu

— ᴄʀᴏᴢᴇᴛ

0

if(sessionStorage.reload) { 
   sessionStorage.reload = true;
   // optionnal
   setTimeout( () => { sessionStorage.setItem('reload', false) }, 2000);
} else {
   sessionStorage.setItem('reload', false);
}

— Alexis Gatuingt
kaynak

Sayfanın JavaScript'te yeniden yüklenip yüklenmediğini veya yenilenip yenilenmediğini kontrol edin

2018'de yeni standart (PerformanceNavigationTiming)

PerformanceNavigationTiming.type

2019-07-08 desteği

Aşağıdaki örnek, bu özelliğin kullanımını göstermektedir.