Sprawdź, czy strona została ponownie załadowana lub odświeżona w JavaScript

186

Chcę sprawdzić, czy ktoś próbuje odświeżyć stronę.

Na przykład po otwarciu strony nic się nie dzieje, ale po odświeżeniu strony powinien zostać wyświetlony alert.

javascript page-refresh Ahmed
źródło
1
Naprawdę niemożliwe bez kodu po stronie serwera. Do czego ci to potrzebne? Może jeśli dasz większy obraz, możemy zaproponować lepszą alternatywę.
Shadow Wizard is Ear For You
Może możesz zrobić coś takiego z ciasteczkiem ... jak przechowywać czas i przy ponownym ładowaniu porównać różnicę czasu.
Felix Kling
Chcę zrobić np. Link na Facebooku będzie #! / Cokolwiek chcę usunąć #! tylko po przeładowaniu strony
Ahmed
1
@Ahmed Próbuję zrobić to samo. Czy którekolwiek z poniższych rozwiązań działało dla Ciebie?
Paul Fitzgerald
3
⚠️⚠️⚠️ window.performance.navigation.typejest przestarzałe, proszę zobaczyć moją odpowiedź .
Илья Зеленько

Odpowiedzi:

221

⚠️⚠️⚠️ window.performance.navigation.typejest przestarzałe, proszę zobaczyć odpowiedź Илья Зеленько

Lepszym sposobem, aby wiedzieć, że strona została ponownie załadowana, jest użycie obiektu nawigatora obsługiwanego przez większość współczesnych przeglądarek.

Korzysta z interfejsu API synchronizacji nawigacji .

//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");
  }
Rozwiń fragment kodu

źródło: https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API

Rahul Jain
źródło
1
dzięki kolego, to dokładne rozwiązanie, aby wykryć, że strona została ponownie załadowana z kliknięcia / odświeżenia prawym przyciskiem myszy z przeglądarki lub przeładowana przez adres URL.
Roque Mejos
4
Uwaga: Chrom zmienił ostatnio to zachowanie. Gdy użytkownik kliknie bieżący pasek adresu i naciśnie Enter, wartość performance.navigation.type będzie wynosić 1, co powinno wynosić 0. Testowałem w wersji 56. Nie jestem pewien, dlaczego.
Jackwin zadzwonił
1
Ich sposób działania jest zgodny z oczekiwaniami, każda interakcja ze stroną, która wymusza nowy stan nawigacji na tej samej stronie, jest uważana za odświeżenie. Dlatego w zależności od kodu jest to bardzo przydatne, aby zarejestrować się za każdym razem, gdy strona jest odświeżana, ponownie ładowana lub jakakolwiek interakcja ajax. Mogę dać temu wiele zastosowań w zakresie funkcjonalności i analiz.
raphie
27
performance.navigation.type == performance.navigation.TYPE_RELOADjest łatwiejszy do odczytania zamiast == 1. Ponadto, jeśli sprawdzisz performance.navigation, zauważysz, że istnieją 4 różne typy nawigacji, takie jak TYPE_BACK_FORWARD:TYPE_NAVIGATE
Vitalij Kornijenko
5
⚠️⚠️⚠️ window.performance.navigation.typejest przestarzałe, proszę zobaczyć moją odpowiedź .
Илья Зеленько
37

Pierwszym krokiem jest sprawdzenie, sessionStorageczy istnieje pewna wstępnie zdefiniowana wartość i czy istnieje alarm użytkownika:

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

Drugim krokiem jest ustawienie sessionStoragepewnej wartości (na przykład true):

sessionStorage.setItem("is_reloaded", true);

Wartości sesji są przechowywane do momentu zamknięcia strony, więc będzie działać tylko wtedy, gdy strona zostanie ponownie załadowana w nowej karcie z witryną. Możesz także zachować liczbę przeładowań w ten sam sposób.

DitherSky
źródło
28
Dwie rzeczy, o których należy pamiętać: 1). Wartości ciągów można przechowywać tylko w pamięci sesji i pamięci lokalnej. Dlatego truejest konwertowany na "true". 2). Pamięć sesji jest utrzymywana, dopóki użytkownik nie zamknie okna przeglądarki, więc nie można odróżnić przeładowywania strony od opuszczania witryny i powrotu do niej w tej samej sesji przeglądarki.
Hector
35

Nowy standard 2018-teraz (PerformanceNavigationTiming)

window.performance.navigationwłaściwość jest nieaktualna w specyfikacji poziomu synchronizacji poziomu 2 . PerformanceNavigationTimingZamiast tego użyj interfejsu.

PerformanceNavigationTiming.type

To jest technologia eksperymentalna .

Sprawdź dokładnie tabelę zgodności przeglądarki przed użyciem jej w produkcji.

Wsparcie w dniu 08.07.2019

Właściwość typu tylko do odczytu zwraca ciąg znaków reprezentujący typ nawigacji. Wartość musi być jedną z następujących czynności:

  • nawiguj - nawigacja rozpoczęła się od kliknięcia linku, wpisania adresu URL w pasku adresu przeglądarki, przesłania formularza lub zainicjowania operacji skryptu innej niż przeładowanie i powrót do poprzedniej wersji, jak podano poniżej.

  • reload - Nawigacja odbywa się poprzez operację przeładowania przeglądarki lub location.reload().

  • back_forward - Nawigacja odbywa się poprzez przeglądanie historii przeglądarki.

  • prerender - Nawigacja jest inicjowana przez wskazówkę dotyczącą prerendera .

Ta właściwość jest tylko do odczytu.

Poniższy przykład ilustruje użycie tej właściwości.

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);
  }
}
Илья Зеленько
źródło
4
+1 za wskazanie przestarzałego API, ale -100 do Apple za brak wsparcia w iOS nadal do 2020 roku
kinakuta
14

Przechowuj plik cookie przy pierwszej wizycie na stronie. Po odświeżeniu sprawdź, czy plik cookie istnieje, a jeśli tak, powiadom alert.

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

i na twoim ciele tag:

<body onload="checkFirstVisit()">
techfoobar
źródło
9
Co z powracającymi użytkownikami?
Red Taz
5
Jak @ Rob2211 mówi, że to sprawdza tylko, czy strona została odwiedzona i może dać fałszywy wynik pozytywny, o ile strona jest ponownie odwiedzana, gdy plik cookie jest nadal aktywny. Nie używaj tego do sprawdzania odświeżenia.
Brannon
@Brannon - Plik cookie jest tworzony bez wartości wygasającej i zostanie zniszczony po zamknięciu przeglądarki.
techfoobar,
1
@techfoobar nice catch. Czy to nie stanowiłoby problemu, gdyby użytkownik ponownie odwiedził witrynę przed zniszczeniem tego pliku cookie?
Brannon
3
@Brannon - Tak, jeśli przeglądarka pozostanie otwarta, a użytkownik ponownie odwiedzi po pewnym czasie, nie będzie to uważane za nową wizytę.
techfoobar,
7

Jeśli 

event.currentTarget.performance.navigation.type

zwroty

0 => użytkownik właśnie wpisał adres URL
1 => strona została ponownie załadowana
2 => kliknięty przycisk Wstecz.

nPcomp
źródło
Mam ten błąd, czy możesz to wyjaśnić? Uncaught TypeError: Nie można odczytać właściwości „currentTarget” niezdefiniowanej
Janatbek Sharsheyev
2 => TYPE_BACK_FORWARD Dostęp do strony uzyskano, przechodząc do historii. developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation
Tiago Freitas Leal
performance.navigation.typejest przestarzałe, proszę zobaczyć moją odpowiedź .
Илья Зеленько
6

Znalazłem tu trochę informacji Odśwież stronę z wykrywaniem Javascript . Jego pierwszą rekomendacją jest użycie ukrytych pól, które zwykle są przechowywane przez odświeżanie strony.

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>
Rozwiń fragment kodu

VoronoiPotato
źródło
Możemy również sprawdzić, sprawdzając Refererwłaściwość i modyfikując odpowiedź serwera na podstawie tej właściwości
Adeel
Uwaga dodatkowa: pierwsza metoda wymieniona na tej stronie zakończy się niepowodzeniem, ponieważ kod jest wykonywany przed analizą DOM. Przeniesienie <script>elementu na dół działałoby - ale nadal nie jest to gwarantowane rozwiązanie (podobnie jak metoda cookie).
Andy E
1
@ Adeel: sprawdzanie również Referernie jest wiarygodne; wiele serwerów proxy i rozszerzeń przeglądarki usuwa je z żądań.
Andy E
@VoronoiPotato Spróbuj streścić informacje zamiast publikować tylko link.
Dallin
1
Dla mnie zawsze wykonuje warunek „if” i nigdy nie wykonuje części „else”, nie ma znaczenia, czy ładowałem stronę, czy odświeżałem stronę.
Parth Vora,
6

Napisałem tę funkcję, aby sprawdzić obie metody jednocześnie za pomocą starej window.performance.navigationi nowej performance.getEntriesByType("navigation"):

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

Opis wyniku:

0: kliknięcie linku, wprowadzenie adresu URL w pasku adresu przeglądarki, przesłanie formularza, kliknięcie zakładki, zainicjowanie za pomocą operacji skryptu.

1: Kliknięcie przycisku Załaduj ponownie lub użycieLocation.reload()

2: Praca z historią przeglądania (Bakc i Forward).

3: działanie prerenderujące, takie jak<link rel="prerender" href="https://example.com/next-page.html">

4: dowolna inna metoda.

Ali Sheikhpour
źródło
1

Znalazłem tu trochę informacji Odśwież stronę z wykrywaniem Javascript

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

window.onbeforeunload = UnLoadWindow;
Manpreet
źródło
3
gdzie jest tutaj" ? zapomniałeś linku?
ᴄʀᴏᴢᴇᴛ
0 
if(sessionStorage.reload) { 
   sessionStorage.reload = true;
   // optionnal
   setTimeout( () => { sessionStorage.setItem('reload', false) }, 2000);
} else {
   sessionStorage.setItem('reload', false);
}
Alexis Gatuingt
źródło