Web-Frontend
js-Tutorial
Eine kurze Diskussion über onbeforeunload- und onunload-Ereignisse in JavaScript_Grundkenntnisse
Eine kurze Diskussion über onbeforeunload- und onunload-Ereignisse in JavaScript_Grundkenntnisse
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>
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
nichtFehler, 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ührtFirefox (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
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1378
52
Wie erstelle ich meine eigenen JavaScript -Bibliotheken?
Mar 18, 2025 pm 03:12 PM
In Artikel werden JavaScript -Bibliotheken erstellt, veröffentlicht und aufrechterhalten und konzentriert sich auf Planung, Entwicklung, Testen, Dokumentation und Werbestrategien.
Wie optimiere ich den JavaScript -Code für die Leistung im Browser?
Mar 18, 2025 pm 03:14 PM
In dem Artikel werden Strategien zur Optimierung der JavaScript -Leistung in Browsern erörtert, wobei der Schwerpunkt auf die Reduzierung der Ausführungszeit und die Minimierung der Auswirkungen auf die Lastgeschwindigkeit der Seite wird.
Was soll ich tun, wenn ich auf den Codendruck auf Kleidungsstücke für Front-End-Thermalpapier-Quittungen stoße?
Apr 04, 2025 pm 02:42 PM
Häufig gestellte Fragen und Lösungen für das Ticket-Ticket-Ticket-Ticket in Front-End im Front-End-Entwicklungsdruck ist der Ticketdruck eine häufige Voraussetzung. Viele Entwickler implementieren jedoch ...
Wie debugge ich den JavaScript -Code effektiv mithilfe von Browser -Entwickler -Tools?
Mar 18, 2025 pm 03:16 PM
In dem Artikel werden effektives JavaScript -Debuggen mithilfe von Browser -Entwickler -Tools, der Schwerpunkt auf dem Festlegen von Haltepunkten, der Konsole und der Analyse der Leistung erörtert.
Wer bekommt mehr Python oder JavaScript bezahlt?
Apr 04, 2025 am 12:09 AM
Es gibt kein absolutes Gehalt für Python- und JavaScript -Entwickler, je nach Fähigkeiten und Branchenbedürfnissen. 1. Python kann mehr in Datenwissenschaft und maschinellem Lernen bezahlt werden. 2. JavaScript hat eine große Nachfrage in der Entwicklung von Front-End- und Full-Stack-Entwicklung, und sein Gehalt ist auch beträchtlich. 3. Einflussfaktoren umfassen Erfahrung, geografische Standort, Unternehmensgröße und spezifische Fähigkeiten.
Wie verwende ich Quellkarten zum Debuggen, um den JavaScript -Code zu debuggen?
Mar 18, 2025 pm 03:17 PM
In dem Artikel wird erläutert, wie Quellkarten zum Debuggen von JavaScript verwendet werden, indem er auf den ursprünglichen Code zurückgegeben wird. Es wird erläutert, dass Quellenkarten aktiviert, Breakpoints eingestellt und Tools wie Chrome Devtools und WebPack verwendet werden.
Der Unterschied in der Konsole.log -Ausgabeergebnis: Warum unterscheiden sich die beiden Anrufe?
Apr 04, 2025 pm 05:12 PM
Eingehende Diskussion der Ursachen des Unterschieds in der Konsole.log-Ausgabe. In diesem Artikel wird die Unterschiede in den Ausgabeergebnissen der Konsolenfunktion in einem Code analysiert und die Gründe dafür erläutert. � ...
TypeScript für Anfänger, Teil 2: Grundlegende Datentypen
Mar 19, 2025 am 09:10 AM
Sobald Sie das Typscript-Tutorial für Einstiegsklasse gemeistert haben, sollten Sie in der Lage sein, Ihren eigenen Code in eine IDE zu schreiben, die TypeScript unterstützt und in JavaScript zusammenfasst. Dieses Tutorial wird in verschiedenen Datentypen in TypeScript eingetaucht. JavaScript hat sieben Datentypen: NULL, UNDEFINED, BOOLEAN, NUMMER, STRING, SYMBOL (durch ES6 eingeführt) und Objekt. TypeScript definiert mehr Typen auf dieser Grundlage, und dieses Tutorial wird alle ausführlich behandelt. Null -Datentyp Wie JavaScript, null in TypeScript
