web-dev-qa-db-de.com

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

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

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

148
Ahmed

Eine bessere Möglichkeit, um festzustellen, ob die Seite tatsächlich neu geladen wurde, ist die Verwendung des Navigatorobjekts, 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");
  }

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

193
Rahul Jain

Der erste Schritt besteht darin, sessionStorage auf einen vordefinierten Wert zu überprüfen und den Benutzer zu benachrichtigen, falls vorhanden:

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

Der zweite Schritt besteht darin, sessionStorage auf einen bestimmten Wert zu setzen (zum Beispiel true):

sessionStorage.setItem("is_reloaded", true);

Die Sitzungswerte werden beibehalten, bis die Seite geschlossen wird, sodass sie nur funktionieren, wenn die Seite in einem neuen Tab mit der Site neu geladen wird. Auf die gleiche Weise können Sie auch die Nachladezählung beibehalten.

39
DitherSky

Neuer Standard 2018, 2019 (PerformanceNavigationTiming)

Die Eigenschaft window.performance.navigation Ist in der Spezifikation Navigation Timing Level 2 veraltet . Bitte benutzen Sie stattdessen die PerformanceNavigationTiming Schnittstelle.

PerformanceNavigationTiming.type

Dies ist eine experimentelle Technologie .

Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese in der Produktion verwenden.

Support am 08.07.2019

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

  • navigieren - Die Navigation wurde durch Klicken auf einen Link, Eingeben der URL in die Adressleiste des Browsers, Übermitteln des Formulars oder Initialisieren über einen anderen Skriptvorgang als reload und back_forward gestartet wie unten aufgeführt.

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

  • back_forward - Die Navigation erfolgt durch die Verlaufsüberquerungsoperation des Browsers.

  • Prerender - Die Navigation wird durch ein 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);
  }
}

Speichern Sie ein Cookie, wenn jemand zum ersten Mal die Seite besucht. Überprüfen Sie beim Aktualisieren, ob Ihr Cookie vorhanden ist, und benachrichtigen Sie ihn, wenn 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 deinem Body Tag:

<body onload="checkFirstVisit()">
15
techfoobar

Ich habe hier einige Informationen gefunden Javascript erkennt Seitenaktualisierung . Seine erste Empfehlung ist die Verwendung ausgeblendeter 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>
7
VoronoiPotato

wenn

event.currentTarget.performance.navigation.type

kehrt zurück

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

6
nPcomp

Ich habe diese Funktion geschrieben, um beide Methoden mit alten window.performance.navigation Und neuen performance.getEntriesByType("navigation") gleichzeitig zu überprüfen:

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:

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

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

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

: Vorrendertätigkeit wie <link rel="prerender" href="//example.com/next-page.html">

4: jede andere Methode.

2
Ali Sheikhpour

Ich habe hier einige Informationen gefunden

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

window.onbeforeunload = UnLoadWindow;
2
Manpreet