JS: Sicherheits-Abfrage vor dem Verlassen einer Seite

01.12.2008 15:29 von webdecker

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>

Zurück

Einen Kommentar schreiben

Kommentar von Matthias | 18.07.2010

Vielen Dank für die Beschreibung! Genau so eine Sicherheitsabfrage suche ich, aber leider funktioniert der oben angegebene Link auf die codingtips nicht mehr. Gibt es noch andere Quellen mit Hintergrundinformationen dazu?