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ź .

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

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://stackoverflow.com//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

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

Nowy standard 2018-teraz (PerformanceNavigationTiming)

PerformanceNavigationTiming.type

Wsparcie w dniu 08.07.2019

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