Eine kurze Diskussion über onbeforeunload- und onunload-Ereignisse in JavaScript

In einem aktuellen Projekt muss ich einen Teil des Inhalts der Seite zwischenspeichern, wenn der Benutzer die Seite verlässt. Ich muss ihn jedoch nicht zwischenspeichern, wenn der Benutzer die Seite aktualisiert Benutzer geht.

Führen Sie diese Funktion aus. Laut Baidu gibt es zwei Ereignisse: onbeforeunload und onunload, aber onbeforeunload wird auch ausgeführt, wenn der Benutzer eine Aktualisierung durchführt. Da ich dafür sehr lange gebraucht habe, möchte ich hier eine kleine Zusammenfassung machen

onbeforeunload- und onunload-Ereignisse

onbeforeunload Definition und Verwendung

Das onbeforeunload-Ereignis wird ausgelöst, wenn die aktuelle Seite verlassen (aktualisiert oder geschlossen) werden soll.

Mit diesem Ereignis kann ein Dialogfeld geöffnet werden, in dem der Benutzer gefragt wird, ob er mit dem Durchsuchen der Seite fortfahren oder die aktuelle Seite verlassen möchte.

Die Standardmeldung des Dialogfelds variiert je nach Browser. Die Standardmeldung ähnelt „Möchten Sie diese Seite wirklich verlassen?“. Diese Informationen können nicht gelöscht werden.

Sie können jedoch einige Meldungsaufforderungen anpassen, die zusammen mit den Standardinformationen im Dialogfeld angezeigt werden.

Hinweis: Wenn Sie das Ereignis onbeforeunload nicht im Element angeben, müssen Sie das Ereignis im Fensterobjekt hinzufügen und benutzerdefinierte Informationen mithilfe des Attributs returnValue erstellen (siehe folgendes Syntaxbeispiel).

Hinweis: Im Firefox-Browser werden nur die Standard-Erinnerungsinformationen angezeigt (benutzerdefinierte Informationen werden nicht angezeigt).

Anwendung:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body onbeforeunload="return test()">
   
</body>
<script type="text/javascript">
  function test(){
    return "你确定要离开吗";
  }
</script>
</html>

Nach dem Login kopieren

oder:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
   
</body>
<script type="text/javascript">
window.onbeforeunload=function(){
  return "你确定要离开吗";
}
 
</script>
</html>

Nach dem Login kopieren

Wenn das Ereignis ausgelöst wird, erscheint ein Dialogfeld mit Bestätigung und Stornierung. Wenn Sie bestätigen, verlassen Sie die Seite, und wenn Sie abbrechen, bleiben Sie weiterhin auf dieser Seite. Natürlich können Sie den Aufforderungstext anpassen.

Was soll ich also tun, wenn ich diese Funktion nur beim Verlassen ausführen muss, nicht aber beim Aktualisieren?

window.onbeforeunload = function() {
 
    var n = window.event.screenX - window.screenLeft;
 
    var b = n > document.documentElement.scrollWidth - 20;
 
    if (!(b && window.event.clientY < 0 || window.event.altKey)) {
      //window.event.returnValue = "真的要刷新页面么？";
      
      //这里放置我想执行缓存的代码
      cacheFunction();
      
    }
 }

Nach dem Login kopieren

Auf diese Weise kann ich beim Verlassen der Seite meinen Cache-Code ausführen, ohne dass das Eingabeaufforderungsfeld angezeigt wird. Beim Aktualisieren wird das Eingabeaufforderungsfeld nicht angezeigt und nicht ausgeführt. Es ist erwähnenswert, dass Ajax zu diesem Zeitpunkt auf Synchronisierung eingestellt sein sollte, das heißt: Async in Ajax sollte geändert werden in: false

Browserkompatibilität

Perfekte Unterstützung für IE, Chrome und Safari

Firefox unterstützt keine SMS-Erinnerungsnachrichten

Opera unterstützt

nicht

Fehler, die bei IE6 und IE7 bei der Verwendung von onbeforeunload auftreten

2. Onunload-Definition und -Nutzung

Das onunload-Ereignis tritt auf, wenn der Benutzer die Seite verlässt.

Die Verwendung ist ähnlich wie bei onbeforeunload

window.onunload = function(){
  return "你确定要离开吗"
}

Nach dem Login kopieren

Browserkompatibilität

In IE6, IE7, IE8 wird es nach dem Aktualisieren der Seite, dem Schließen des Browsers und nach dem Seitensprung ausgeführt;

IE9 führt die Seitenaktualisierung durch, aber der Seitensprung und das Schließen des Browsers werden nicht ausgeführt

Firefox (einschließlich Firefox3.6) kann nach dem Schließen des Tags, nach dem Seitensprung und nach dem Aktualisieren der Seite ausgeführt werden, aber nicht nach dem Schließen des Browsers

Safari wird nach dem Aktualisieren der Seite und dem Seitensprung ausgeführt, aber nicht, wenn der Browser geschlossen wird

Opera und Chrome werden unter keinen Umständen ausgeführt.

Zusammenfassung

Onunload und onbeforeunload werden beim Aktualisieren oder Schließen aufgerufen. Sie können über window.onunload im

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse