JS: Sicherheits-Abfrage vor dem Verlassen einer Seite
(Kommentare: 6)
Wenn man eine Website verlässt - mit einem Formular darauf - möchte man (via JavaScript) gefragt werden, ob man die Seite wirklich verlassen will, denn dann würden ggf. Eingaben in der Eingabemaske verloren gehen.
Seite verlassen kann heißen: Link klicken, Reload/Refresh drücken, Tab oder Browser schließen.
Mit dem window-Event "onbeforeunload" kann man das Problem lösen. Gute Erläuterung hier: www.codingtips.org. Dort interessanter Hinweis auf Links mit JavaScript.
Problem: Wenn man mit Submit das Formular regulär absendet, dann wird auch das Event "beforeunload" ausgelöst. Eine Lösung hierfür ist inzwischen auch auf obiger Website zu lesen, hier aber noch mal konkret:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<style>
body { background-color: #CCC; }
</style>
<script type="text/javascript" src="/plugins/mootools/mootools.js"></script>
<script type="text/javascript">
var unloadCheck = true;
window.onbeforeunload = function() {
if (unloadCheck) {
return "Sie verlieren ggf. Ihre letzten, nicht gespeicherten Eingaben!";
} else {
return;
}
}
window.addEvent('domready', function() {
$(document).getElements('form').addEvent('submit', function(event) {
unloadCheck = false;
});
});
</script>
</head>
<body>
<div id="wrapper">
<a href="http://www.webdecker.de" title="Somewhere">Go somewhere</a>
<br />
<form method="post" action="">
<fieldset>
<div>
Text: <input type="text" name="text" value="" /><br />
</div>
<div>
<input type="submit" name="submit" value="submit" /><br />
</div>
</fieldset>
</form>
</div>
</body>
</html>
Update 11.03.2020
Hier noch mal ein Beispiel mit jQuery und zusätzlicher Einschränkung, wann beim Seite-verlassen nachgefragt werden soll, nämlich z.B. nur dann, wenn eine Form auf der Seite zu finden ist.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>onbeforeunload</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<div id="wrapper">
<a href="https://www.webdecker.de" title="Somewhere">Go somewhere</a><br><br>
<form method="post" action="">
Text: <input type="text" name="text" value=""><br>
<input type="submit" name="send" value="submit"><br>
</form>
</div>
<script type="text/javascript">
var unloadCheck = true;
window.onbeforeunload = function() {
if (unloadCheck) {
// To be asked for confirmation this method must return a value, otherwise no question.
// Chrome and Firefox display their own message, IE is displaying the return value.
return "You may loose your input...";
}
};
(function($) {
$(document).ready(function() {
// Only ask if there is a form, otherwise no check...
// (You may do some other checks to prevent browser from asking,
// e.g. do check only if no form with class "askbeforeunload" found and so on...)
if ($('form').length < 1) unloadCheck = false;
// If form is submitted, then don't ask...
$('form').on('submit', function(ev) {
unloadCheck = false;
return true;
});
});
})(jQuery);
</script>
</body>
</html>
Auf der Seite https://www.askingbox.de/info/javascript-warnung-beim-verlassen-der-seite-anzeigen wird gezeigt, wie man zusätzlich noch prüfen kann, ob im Formular etwas eingegeben wurde...
Kommentare
Kommentar von Matthias |
Kommentar von Armi |
Kann man im firefox browser irgendwie einstellen, dass man solche popups nicht mehr haben will? Mich nervt dies popup extrem.
Kommentar von webdecker |
Wüsste nicht, wie. JavaScript ausschalten ist ja keine Lösung...
Kommentar von Javhannes |
JavaSkript abschalten ist keine LÖsung - wohl aber das Addon Greasemonkey mit dem Skript aus camp-firefox
Kommentar von Jan |
JOOOOOOOO
Kommentar von Markus |
Hallo Webdecker,
prima Skript, fast genau das was ich gesucht habe ;-)
Im Joomla habe ich ein plugin installiert, das frei gestaltbare PopUp Boxen anzeigt:
<script>
jQuery(function($) {
window.onbeforeunload = function(e) {
$("#rstbox_1").trigger("open");
};
});
</script>
Allerdings wird die Box nur einen kleinen Augenblick lang angezeigt, im Hintergrund wird die neue Seite geladen und die Box verschwindet.
Wie halte ich das Laden der neue Seite an, bis ein Ergebnis von $("#rstbox_1").trigger("open"); zurückgegeben wurde?
Viele Grüße
Markus
Antwort von webdecker
onbeforeunload muss einen Wert mit return zurück liefern, wenn gefragt werden soll. Sonst wird keine Frage gestellt. Siehe auch Update im Text oben.
Einen Kommentar schreiben