Heim > Artikel > Web-Frontend > Eine kurze Diskussion über onbeforeunload- und onunload-Ereignisse in JavaScript_Grundkenntnisse

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

WBOYOriginal: 2016-05-16 15:26:221134Durchsuche

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 6c04bd5ca3fcae76e30b72ad730ca86d 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>

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>

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

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 "你确定要离开吗"
}

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 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Skript angegeben werden. Der Unterschied besteht darin, dass onbeforeunload vor onunload ausgeführt wird und auch die Ausführung von onunload verhindern kann. Onbeforeunload wird auch aufgerufen, wenn die Seite aktualisiert oder geschlossen wird, wenn zum Server gegangen wird, um eine neue Seite zu lesen, aber noch nicht mit dem Lesen begonnen wurde, während onunload die neue Seite gelesen hat, die vom Server geladen werden muss wird gerade aufgerufen, wenn die aktuelle Seite gelöscht wird. Onunload kann nicht verhindern, dass die Seite aktualisiert und geschlossen wird. Und Onbeforeunload kann es.

Onload wird nur ausgeführt, wenn die Seite geladen wird

Wenn die Seite geschlossen wird, wird zuerst onbeforeunload und schließlich onunload
ausgeführt Wenn die Seite aktualisiert wird, wird zuerst onbeforeunload, dann onunload und schließlich onload ausgeführt.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JavaScript-Grundlagen (6) Funktionsausdruck-Closure_Javascript-KenntnisseNächster Artikel：JavaScript-Grundlagen (6) Funktionsausdruck-Closure_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen