Überprüfen Sie, ob die Seite in JavaScript neu geladen oder aktualisiert wird

183

Ich möchte überprüfen, wann jemand versucht, eine Seite zu aktualisieren.

Wenn ich beispielsweise eine Seite öffne, passiert nichts, aber wenn ich die Seite aktualisiere, sollte eine Warnung angezeigt werden.

javascript page-refresh Ahmed
quelle
1
Ohne serverseitigen Code nicht wirklich möglich. Wofür brauchst du es? Wenn Sie das Gesamtbild betrachten, können wir Ihnen möglicherweise eine bessere Alternative vorschlagen.
Schatten-Assistent ist Ohr für Sie
Vielleicht könnten Sie so etwas mit einem Cookie machen ... wie die Zeit speichern und beim Nachladen den Zeitunterschied vergleichen.
Felix Kling
Ich möchte wie Facebook Link machen wird #! / Alles, was ich entfernen möchte #! wenn nur Seite neu laden
Ahmed
1
@Ahmed Ich versuche das Gleiche zu tun. Hat eine der folgenden Lösungen für Sie funktioniert?
Paul Fitzgerald
3
⚠️⚠️⚠️ window.performance.navigation.typeist veraltet, bitte sehen Sie meine Antwort .
Илья Зеленько

Antworten:

219

⚠️⚠️⚠️ window.performance.navigation.typeist veraltet, bitte sehen Sie die Antwort von Илья ьеленько

Eine bessere Möglichkeit, um festzustellen, dass die Seite tatsächlich neu geladen wird, besteht darin, das Navigatorobjekt zu verwenden, das von den meisten modernen Browsern unterstützt wird.

Es verwendet die Navigation Timing API .

//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");
  }
Erweitern Sie das Snippet

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

Rahul Jain
quelle
1
danke Kumpel, dies ist eine genaue Lösung, um zu erkennen, dass die Seite entweder durch Klicken mit der rechten Maustaste / Aktualisierung aus dem Browser oder durch die URL neu geladen wird.
Roque Mejos
4
Seien Sie sich bewusst.Chrome hatte kürzlich dieses Verhalten geändert. Wenn der Benutzer auf die aktuelle Adressleiste klickt und die Eingabetaste drückt, ist der Wert von performance.navigation.type 1, was 0 sein sollte. Ich habe in Version 56 getestet. Ich weiß nicht warum.
Jackwin Tung
1
Die Funktionsweise ist wie erwartet. Jede Interaktion mit der Seite, die einen neuen Navigationsstatus auf dieselbe Seite erzwingt, wird als Aktualisierung betrachtet. Abhängig von Ihrem Code ist dies äußerst nützlich, um sich entweder jedes Mal zu registrieren, wenn die Seite aktualisiert, neu geladen oder eine Ajax-Interaktion durchgeführt wurde. Ich kann dies für Funktionen und Analysen sehr nützlich machen.
Raphie
26
performance.navigation.type == performance.navigation.TYPE_RELOADist leichter zu lesen als == 1. Auch, wenn Sie überprüfen , performance.navigationwerden Sie feststellen , dass es 4 diffrent Navigationstypen wie TYPE_BACK_FORWARD,TYPE_NAVIGATE
Vitalij Kornijenko
5
⚠️⚠️⚠️ window.performance.navigation.typeist veraltet, bitte sehen Sie meine Antwort .
Илья Зеленько
37

Der erste Schritt besteht darin, sessionStoragenach einem vordefinierten Wert zu suchen und festzustellen, ob ein Alarmbenutzer vorhanden ist:

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

Der zweite Schritt besteht darin sessionStorage, einen Wert festzulegen (zum Beispiel true):

sessionStorage.setItem("is_reloaded", true);

Sitzungswerte bleiben erhalten, bis die Seite geschlossen wird, sodass sie nur funktioniert, wenn die Seite in einer neuen Registerkarte mit der Site neu geladen wird. Auf die gleiche Weise können Sie auch die Anzahl der Nachladevorgänge beibehalten.

DitherSky
quelle
28
Zwei Dinge, die Sie beachten sollten: 1). Sie können Zeichenfolgenwerte nur im Sitzungs- und lokalen Speicher speichern. Daher truewird in konvertiert "true". 2). Der Sitzungsspeicher bleibt bestehen, bis der Benutzer das Browserfenster schließt, sodass Sie den Unterschied zwischen dem erneuten Laden der Seite und dem Navigieren von und zurück zu Ihrer Site innerhalb derselben Browsersitzung nicht erkennen können.
Hector
35

Neuer Standard ab 2018 (PerformanceNavigationTiming)

window.performance.navigationDie Eigenschaft ist in der Spezifikation Navigation Timing Level 2 veraltet . Bitte benutzen Sie stattdessen die Schnittstelle.PerformanceNavigationTiming

PerformanceNavigationTiming.type

Dies ist eine experimentelle Technologie .

Überprüfen Sie die Browserkompatibilitätstabelle sorgfältig, bevor Sie sie in der Produktion verwenden.

Unterstützung am 08.07.2019

Die schreibgeschützte Eigenschaft type gibt eine Zeichenfolge zurück, die den Navigationstyp darstellt. Der Wert muss einer der folgenden sein:

  • navigieren - Die Navigation wird gestartet, indem Sie auf einen Link klicken, die URL in die Adressleiste des Browsers eingeben, das Formular senden oder über eine andere Skriptoperation als reload und back_forward initialisieren, wie unten aufgeführt.

  • reload - Die Navigation erfolgt über den Reload-Vorgang des Browsers oder location.reload().

  • back_forward - Die Navigation erfolgt über den Verlaufsdurchlauf des Browsers.

  • Prerender - Die Navigation wird durch einen Prerender-Hinweis eingeleitet .

Diese Eigenschaft ist schreibgeschützt.

Das folgende Beispiel veranschaulicht die Verwendung dieser Eigenschaft.

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);
  }
}
Илья Зеленько
quelle
3
+1 für den Hinweis auf die veraltete API, aber -100 für Apple für die mangelnde Unterstützung in iOS bis 2020
Kinakuta
14

Speichern Sie ein Cookie, wenn jemand die Seite zum ersten Mal besucht. Überprüfen Sie beim Aktualisieren, ob Ihr Cookie vorhanden ist, und benachrichtigen Sie ihn, falls dies der Fall ist.

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

und in Ihrem Körper-Tag:

<body onload="checkFirstVisit()">
Techfoobar
quelle
9
Was ist mit wiederkehrenden Benutzern?
Red Taz
5
Wie @ Rob2211 sagt, prüft dies nur, ob die Seite besucht wurde und kann ein falsches Positiv abgeben, solange die Seite erneut besucht wird, während der Cookie noch aktiv ist. Verwenden Sie dies nicht, um die Aktualisierung zu überprüfen.
Brannon
@Brannon - Das Cookie wird ohne abgelaufenen Wert erstellt und beim Schließen des Browsers zerstört.
Techfoobar
1
@techfoobar schöner Fang. Wäre dies nicht immer noch ein Problem, wenn der Benutzer die Site erneut besucht, bevor dieses Cookie zerstört wird?
Brannon
3
@Brannon - Ja, wenn der Browser geöffnet bleibt und der Benutzer nach einiger Zeit erneut besucht, wird dies nicht als neuer Besuch betrachtet.
Techfoobar
7

wenn 

event.currentTarget.performance.navigation.type

kehrt zurück

0 => Benutzer hat gerade eine URL eingegeben
1 => Seite neu geladen
2 => Zurück geklickt.

nPcomp
quelle
Ich habe diesen Fehler, können Sie es mehr erklären? Nicht gefangener Typfehler: Die Eigenschaft 'currentTarget' von undefined
Janatbek Sharsheyev kann am
2 => TYPE_BACK_FORWARD Auf die Seite wurde zugegriffen, indem Sie in den Verlauf navigierten. developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation
Tiago Freitas Leal
performance.navigation.typeist veraltet, bitte sehen Sie meine Antwort .
Злья Зеленько
6

Ich habe hier einige Informationen gefunden. Javascript Detecting Page Refresh . Seine erste Empfehlung ist die Verwendung versteckter Felder, die in der Regel durch Seitenaktualisierungen gespeichert werden.

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>
Erweitern Sie das Snippet

VoronoiPotato
quelle
Wir können dies auch überprüfen, indem wir die RefererEigenschaft überprüfen und die Serverantwort auf der Grundlage dieser Eigenschaft ändern
Adeel
Randnotiz: Die erste auf dieser Seite aufgeführte Methode schlägt fehl, da der Code ausgeführt wird, bevor das DOM analysiert wurde. Das <script>Element nach unten zu verschieben würde funktionieren - aber es ist immer noch keine garantierte Lösung (und die Cookie-Methode auch nicht).
Andy E
1
@Adeel: Überprüfung Refererist auch nicht zuverlässig; Viele Proxys und Browsererweiterungen entfernen Anforderungen.
Andy E
@VoronoiPotato Bitte versuchen Sie, die Informationen zusammenzufassen, anstatt nur einen Link zu veröffentlichen.
Dallin
1
Für mich wird immer die Bedingung "if" ausgeführt und niemals der Teil "else". Dabei spielt es keine Rolle, ob ich eine Seite geladen oder eine Seite aktualisiert habe.
Parth Vora
6

Ich habe diese Funktion geschrieben, um beide Methoden gleichzeitig mit alt window.performance.navigationund neu zu überprüfen 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;
}

Ergebnisbeschreibung:

0: Klicken auf einen Link, Eingeben der URL in die Adressleiste des Browsers, Senden des Formulars, Klicken auf Lesezeichen, Initialisieren durch eine Skriptoperation.

1: Klicken Sie auf die Schaltfläche Neu laden oder verwenden SieLocation.reload()

2: Arbeiten mit dem Browserverlauf (Bakc und Forward).

3: Vorrendering-Aktivität wie<link rel="prerender" href="https://example.com/next-page.html">

4: jede andere Methode.

Ali Sheikhpour
quelle
1

Ich habe hier einige Informationen gefunden. Javascript Detecting Page Refresh

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

window.onbeforeunload = UnLoadWindow;
Manpreet
quelle
3
Wo ist hier" ? Hast du den Link vergessen?
1.
0 
if(sessionStorage.reload) { 
   sessionStorage.reload = true;
   // optionnal
   setTimeout( () => { sessionStorage.setItem('reload', false) }, 2000);
} else {
   sessionStorage.setItem('reload', false);
}
Alexis Gatuingt
quelle