Wie zeigen, die „Sind Sie sicher, dass Sie auf dieser Seite weg navigieren möchten?“, Wenn Änderungen begangen?

StackOverflow https://stackoverflow.com/questions/1119289

Frage

Hier in Stackoverflow, wenn Sie begonnen hat, Änderungen vorzunehmen, dann versuchen Sie die Seite verlassen zu navigieren, eine Javascript-Bestätigungstaste erscheint und fragt: „Sind Sie sicher, dass Sie auf dieser Seite weg navigieren mögen“ blee blah bloo ...

Hat jemand implementiert vor, wie kann ich verfolgen, dass Änderungen begangen wurden? Ich glaube, ich könnte dies selbst tun, ich versuche, die guten Praktiken von Ihnen die Experten zu lernen.

Ich habe versucht, die folgenden aber immer noch nicht funktioniert: 

<html>
<body>
    <p>Close the page to trigger the onunload event.</p>
    <script type="text/javascript">
        var changes = false;        
        window.onbeforeunload = function() {
            if (changes)
            {
                var message = "Are you sure you want to navigate away from this page?\n\nYou have started writing or editing a post.\n\nPress OK to continue or Cancel to stay on the current page.";
                if (confirm(message)) return true;
                else return false;
            }
        }
    </script>

    <input type='text' onchange='changes=true;'> </input>
</body>
</html>

Kann jemand ein Beispiel posten?

War es hilfreich?

Lösung

Update (2017)

Moderne Browser betrachten nun eine benutzerdefinierte Nachricht Anzeigen einer Sicherheitsrisiko sein und es war deshalb aus allen von ihnen entfernt . Browser jetzt nur allgemeine Nachrichten anzuzeigen. Da wir nicht mehr kümmern müssen über die Nachricht einstellen, es ist so einfach wie: 

// Enable navigation prompt
window.onbeforeunload = function() {
    return true;
};
// Remove navigation prompt
window.onbeforeunload = null;

Lesen Sie weiter unten für Legacy-Browser-Unterstützung.

Update (2013)

Die ursprünglichen Antwort ist geeignet für IE6-8 und FX1-3.5 (das ist das, was wir zielten im Jahr 2009 zurück, als es geschrieben wurde), sondern ist jetzt veraltet und wird in den meisten aktuellen Browsern nicht funktionieren - I hab Referenz es links unten.

Die window.onbeforeunload nicht konsequent von allen Browsern behandelt. Es sollte eine Funktionsreferenz sein und kein String (wie die ursprüngliche Antwort angegeben), aber das wird in älteren Browsern arbeiten, weil die Prüfung für die meisten von ihnen, ob zu sein scheint etwas zu onbeforeunload zugeordnet ist (einschließlich einer Funktion, die null zurückgibt).

Sie setzen window.onbeforeunload auf eine Funktionsreferenz, aber in älteren Browsern haben Sie die returnValue der Veranstaltung zu setzen, anstatt nur einen String zurückkehrt: 

var confirmOnPageExit = function (e) 
{
    // If we haven't been passed the event get the window.event
    e = e || window.event;

    var message = 'Any text will block the navigation and display a prompt';

    // For IE6-8 and Firefox prior to version 4
    if (e) 
    {
        e.returnValue = message;
    }

    // For Chrome, Safari, IE8+ and Opera 12+
    return message;
};

Sie können nicht, dass confirmOnPageExit haben den Scheck zu tun und null zurück, wenn der Benutzer ohne die Nachricht fortgesetzt werden soll. Sie müssen noch um das Ereignis entfernen zuverlässig sie ein- und ausschalten: 

// Turn it on - assign the function that returns the string
window.onbeforeunload = confirmOnPageExit;

// Turn it off - remove the function entirely
window.onbeforeunload = null;

Original Antwort (arbeitete im Jahr 2009)

Zum Einschalten: 

window.onbeforeunload = "Are you sure you want to leave?";

Zum Ausschalten: 

window.onbeforeunload = null;

Beachten Sie, dass dies kein normales Ereignis -. Sie nicht, um es auf die übliche Weise binden kann,

für Werte überprüfen? Das hängt von Ihrer Validation Framework.

In jQuery dies so etwas wie (sehr einfaches Beispiel) sein könnte: 

$('input').change(function() {
    if( $(this).val() != "" )
        window.onbeforeunload = "Are you sure you want to leave?";
});

Andere Tipps

Der onbeforeunload Microsoft-ism ist die nächste Sache, die wir zu einer Standardlösung, aber beachten Sie, dass Browser-Unterstützung ist uneben; z.B. für Opera funktioniert es nur in der Version 12 und höher (noch in der Beta als dies geschrieben wird).

Auch für maximale Kompatibilität , müssen Sie mehr tun, als einfach einen String zurück, wie auf dem Mozilla Developer Network .

Beispiel: definiert die folgenden zwei Funktionen zur Aktivierung / Deaktivierung der Navigationsaufforderung (siehe das MDN Beispiel): 

function enableBeforeUnload() {
    window.onbeforeunload = function (e) {
        return "Discard changes?";
    };
}
function disableBeforeUnload() {
    window.onbeforeunload = null;
}

Dann ein Formular wie folgt definieren: 

<form method="POST" action="" onsubmit="disableBeforeUnload();">
    <textarea name="text"
              onchange="enableBeforeUnload();"
              onkeyup="enableBeforeUnload();">
    </textarea>
    <button type="submit">Save</button>
</form>

Auf diese Weise wird der Benutzer nur über die Navigation weg gewarnt, wenn er den Textbereich geändert hat, und wird nicht gefragt, wenn er tatsächlich ist das Formular absenden.

Um diese Arbeit in Chrome und Safari machen, würden Sie es so tun müssen, 

window.onbeforeunload = function(e) {
    return "Sure you want to leave?";
};

Referenz: https://developer.mozilla.org/en/DOM/window. onbeforeunload

Mit JQuery dieses Zeug ist zu tun, recht einfach. Da Sie auf Gruppen binden können.

Es ist nicht genug, um die onbeforeunload zu tun, dass Sie nur wollen die navigate weg auslösen, wenn jemand Bearbeitung Sachen gestartet.

jquerys 'beforeunload' funktionierte großartig für mich 

$(window).bind('beforeunload', function(){
    if( $('input').val() !== '' ){
        return "It looks like you have input you haven't submitted."
    }
});

Dies ist eine einfache Möglichkeit, um die Nachricht zu präsentieren, wenn eine Dateneingabe in Form ist, und nicht um die Nachricht zu zeigen, wenn das Formular abgeschickt wird: 

$(function () {
    $("input, textarea, select").on("input change", function() {
        window.onbeforeunload = window.onbeforeunload || function (e) {
            return "You have unsaved changes.  Do you want to leave this page and lose your changes?";
        };
    });
    $("form").on("submit", function() {
        window.onbeforeunload = null;
    });
})

für neue Leute, die nach einer einfachen Lösung suchen, nur versuchen, Areyousure.js

Keiths bereits erstaunliche Antwort :

Benutzerdefinierte Warnmeldungen

Damit benutzerdefinierte Nachrichten Warnung, können Sie es in einer Funktion wie diese wickeln können: 

function preventNavigation(message) {
    var confirmOnPageExit = function (e) {
        // If we haven't been passed the event get the window.event
        e = e || window.event;

        // For IE6-8 and Firefox prior to version 4
        if (e)
        {
            e.returnValue = message;
        }

        // For Chrome, Safari, IE8+ and Opera 12+
        return message;
    };
    window.onbeforeunload = confirmOnPageExit;
}

Dann rufen Sie einfach diese Funktion mit der benutzerdefinierten Meldung: 

preventNavigation("Baby, please don't go!!!");

Aktivieren der Navigation wieder

So aktivieren Sie Navigation, alles, was Sie tun müssen, ist festgelegt window.onbeforeunload null. Hier ist sie, in einer netten kleinen Funktion eingewickelt, die überall aufgerufen werden können: 

function enableNavigation() {
    window.onbeforeunload = null;
}

jQuery verwenden zu binden, diese Elemente zu bilden

Wenn jQuery verwenden, dies leicht zu alle Elemente eines Formulars wie folgt gebunden werden kann: 

$("#yourForm :input").change(function() {
    preventNavigation("You have not saved the form. Any \
        changes will be lost if you leave this page.");
});

Dann wird die Form zu ermöglichen, eingereicht werden: 

$("#yourForm").on("submit", function(event) {
    enableNavigation();
});

Dynamisch modifizierte Formen:

preventNavigation() und enableNavigation() kann auf alle anderen Funktionen gebunden werden je nach Bedarf, wie dynamisch ein Formular ändern, oder klicken Sie auf eine Schaltfläche, die ein AJAX-Request sendet. Ich tat dies, indem ein verstecktes Eingabeelement zum Formular hinzu: 

<input id="dummy_input" type="hidden" />

Dann jedes Mal wenn ich den Benutzer von der Navigation weg verhindern will, ich löse die Änderung an diesem Eingang ein, um sicherzustellen, dass preventNavigation() ausgeführt wird: 

function somethingThatModifiesAFormDynamically() {

    // Do something that modifies a form

    // ...
    $("#dummy_input").trigger("change");
    // ...
}

Hier versuchen, dies funktioniert 100% 

<html>
<body>
<script>
var warning = true;
window.onbeforeunload = function() {  
  if (warning) {  
    return "You have made changes on this page that you have not yet confirmed. If you navigate away from this page you will lose your unsaved changes";  
    }  
}

$('form').submit(function() {
   window.onbeforeunload = null;
});
</script>
</body>
</html>

Wenn der Benutzer Änderungen an der Form beginnt, wird ein boolean-Flag gesetzt. Wenn der Benutzer dann von der Seite entfernt zu navigieren versucht, überprüfen Sie die Flagge in dem window.onunload Ereignis. Wenn das Flag gesetzt ist, zeigen Sie die Nachricht, indem sie es als String zurück. Zurückführen der Nachricht als String einen Bestätigungsdialog mit Ihrer Nachricht Popup.

Wenn Sie AJAX verwenden, die Änderungen zu übernehmen, können Sie das Flag auf false, nachdem die Änderungen begangen worden sind (das heißt in dem Ajax-Erfolg Ereignisse).

Die Standard besagt dass Aufforderung sein kann gesteuert durch die Aufhebung beforeunload Ereignis oder die Einstellung der Rückkehr Wert auf einen nicht-null-Wert . Darin heißt es auch, dass Autoren Event.preventDefault () anstelle von return, und die Nachricht an den Benutzer ist nicht anpassbar .

Ab 69.0.3497.92, Chrome hat nicht den Standard erfüllt. Allerdings gibt es eine Bugreport eingereicht, und ein < a href = "https://chromium-review.googlesource.com/c/chromium/src/+/1154225" rel = "nofollow noreferrer"> ist Überprüfung im Gange. Chrome erfordert return durch Bezugnahme auf das Ereignis-Objekt festgelegt wird, nicht der Wert vom Handler zurückgegeben.

Es liegt in der Verantwortung des Autors zu verfolgen, ob Änderungen vorgenommen wurden; es kann mit einer Variablen oder indem sichergestellt wird das Ereignis erfolgen wird nur behandelt, wenn nötig. 

window.addEventListener('beforeunload', function (e) {
    // Cancel the event as stated by the standard.
    e.preventDefault();
    // Chrome requires returnValue to be set.
    e.returnValue = '';
});
    
window.location = 'about:blank';

Sie können ein onchange Ereignis auf dem Textfeld (oder anderen Feldern) hinzufügen, die eine Variable in JS gesetzt. Sie überprüfen den Wert dieser Variablen und zeigen die Warnung entsprechend, wenn der Benutzer versucht, die Seite (window.onunload) zu schließen.

Basierend auf alle Antworten auf diesen Thread, schrieb ich den folgenden Code und es funktionierte für mich.

Wenn Sie nur einige Eingabe / Textarea-Tags, die ein onunload Ereignis überprüft werden muss, können Sie HTML5-Daten-Attribute als data-onunload="true" zuweisen

für zB. 

<input type="text" data-onunload="true" />
<textarea data-onunload="true"></textarea>

und die Javascript (jQuery) kann wie folgt aussehen: 

$(document).ready(function(){
    window.onbeforeunload = function(e) {
        var returnFlag = false;
        $('textarea, input').each(function(){
            if($(this).attr('data-onunload') == 'true' && $(this).val() != '')
                returnFlag = true;
        });

        if(returnFlag)
            return "Sure you want to leave?";   
    };
});

hier ist mein html 

<!DOCTYPE HMTL>
<meta charset="UTF-8">
<html>
<head>
<title>Home</title>
<script type="text/javascript" src="script.js"></script>
</head>

 <body onload="myFunction()">
    <h1 id="belong">
        Welcome To My Home
    </h1>
    <p>
        <a id="replaceME" onclick="myFunction2(event)" href="https://www.ccis.edu">I am a student at Columbia College of Missouri.</a>
    </p>
</body>

Und so ist dies, wie ich etwas tat, ähnlich in javaScript 

var myGlobalNameHolder ="";

function myFunction(){
var myString = prompt("Enter a name", "Name Goes Here");
    myGlobalNameHolder = myString;
    if (myString != null) {
        document.getElementById("replaceME").innerHTML =
        "Hello " + myString + ". Welcome to my site";

        document.getElementById("belong").innerHTML =
        "A place you belong";
    }   
}

// create a function to pass our event too
function myFunction2(event) {   
// variable to make our event short and sweet
var x=window.onbeforeunload;
// logic to make the confirm and alert boxes
if (confirm("Are you sure you want to leave my page?") == true) {
    x = alert("Thank you " + myGlobalNameHolder + " for visiting!");
}
}

Es kann leicht durch Einstellen einer ChangeFlag , um wahr gemacht werden, auf onChange Falle TextArea- . Verwenden Sie Javascript, um zu zeigen, bestätigen Dialogfeld auf der Basis der ChangeFlag Wert. Entsorgen Sie das Formular aus und navigieren Sie zu angeforderte Seite, wenn bestätigen gibt true zurück, sonst do-nothing .

Was Sie verwenden möchten, ist das onunload Ereignis in JavaScript.

Hier ist ein Beispiel: http://www.w3schools.com/jsref/event_onunload. asp

Es gibt einen „onunload“ Parameter für den Body-Tag Sie JavaScript-Funktionen von dort aus aufrufen können. Wenn es false zurück verhindert es die Navigation weg.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top