wake-up-neo.com

Wie zeige ich die Meldung "Möchten Sie wirklich von dieser Seite weg navigieren?" Wann wurden Änderungen vorgenommen?

Wenn Sie hier im Stapelüberlauf mit Änderungen begonnen haben und versuchen, von der Seite weg zu navigieren, wird eine Schaltfläche zur Bestätigung von Javascript angezeigt und die folgende Meldung angezeigt: "Möchten Sie wirklich von dieser Seite weg navigieren?" blee bla blo ...

Hat dies schon jemand implementiert? Wie kann ich nachverfolgen, dass Änderungen vorgenommen wurden? Ich glaube, ich könnte das selbst tun, ich versuche, die guten Praktiken von Ihnen, den Experten, zu lernen.

Ich habe Folgendes versucht, aber es funktioniert immer noch nicht:

<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?

246
Shimmy

Update (2017)

Moderne Browser betrachten die Anzeige einer benutzerdefinierten Nachricht nun als Sicherheitsrisiko und haben daher entfernt von allen. Browser zeigen jetzt nur allgemeine Nachrichten an. Da wir uns nicht mehr um das Setzen der Nachricht kümmern müssen, ist dies so einfach wie:

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

Unten finden Sie Informationen zur Unterstützung älterer Browser.

Update (2013)

Die ursprüngliche Antwort ist für IE6-8 und FX1-3.5 geeignet (auf die wir bereits 2009 abzielen, als es geschrieben wurde), ist jedoch veraltet und funktioniert in den meisten aktuellen Browsern nicht mehr - ich bin gegangen es unten als Referenz.

Das window.onbeforeunload wird nicht von allen Browsern konsistent behandelt. Es sollte eine Funktionsreferenz und keine Zeichenfolge sein (wie in der ursprünglichen Antwort angegeben), dies funktioniert jedoch in älteren Browsern, da bei den meisten offenbar geprüft wird, ob onbeforeunload etwas zugewiesen ist (einschließlich einer Funktion, die gibt null) zurück.

Sie setzen window.onbeforeunload auf einen Funktionsverweis, aber in älteren Browsern müssen Sie das returnValue des Ereignisses festlegen, anstatt nur einen String zurückzugeben:

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 veranlassen, dass confirmOnPageExit die Prüfung durchführt und null zurückgibt, wenn der Benutzer ohne die Nachricht fortfahren soll. Sie müssen das Ereignis noch entfernen, um es zuverlässig ein- und auszuschalten:

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

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

Ursprüngliche Antwort (arbeitete im Jahr 2009)

So schalten Sie es ein:

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

So schalten Sie es aus:

window.onbeforeunload = null;

Denken Sie daran, dass dies kein normales Ereignis ist - Sie können sich nicht auf die übliche Weise daran binden.

Nach Werten suchen? Das hängt von Ihrem Validierungsrahmen ab.

In jQuery könnte dies etwa so aussehen (sehr einfaches Beispiel):

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

Der onbeforeunload Microsoft-Ismus ist das Nächste, was wir zu einer Standardlösung haben, aber beachten Sie, dass die Browserunterstützung uneinheitlich ist. z.B. für Opera funktioniert nur in Version 12 und höher (noch in der Beta zum jetzigen Zeitpunkt).

Außerdem müssen Sie für maximale Kompatibilität mehr tun, als nur einen String zurückzugeben, wie im Mozilla Developer Network erläutert.

Beispiel: Definieren Sie die folgenden zwei Funktionen zum Aktivieren/Deaktivieren der Navigationsaufforderung (siehe MDN-Beispiel):

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

Dann definieren Sie ein Formular wie dieses:

<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 dann vor dem Wegnavigieren gewarnt, wenn er den Textbereich geändert hat, und er wird nicht dazu aufgefordert, wenn er das Formular tatsächlich sendet.

37
Søren Løvborg

Damit dies in Chrome und Safari funktioniert, müssten Sie es so machen

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

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

19
sshow

Mit JQuery dieses Zeug ist ziemlich einfach zu machen. Da kann man sich an Sets binden.

Es ist NICHT genug, um das Onbeforunload auszuführen. Sie möchten das Navigieren nur dann auslösen, wenn jemand mit der Bearbeitung von Inhalten begonnen hat.

18
Sam Saffron

jquery 'beforeunload' hat bei mir super funktioniert

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

Dies ist eine einfache Möglichkeit, die Nachricht zu präsentieren, wenn Daten in das Formular eingegeben werden, und die Nachricht nicht anzuzeigen, wenn das Formular gesendet 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;
    });
})
11
Carl G

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

11
lawphotog

Um auf Keiths bereits erstaunliche Antwort zu erweitern:

Benutzerdefinierte Warnmeldungen

Um benutzerdefinierte Warnmeldungen zuzulassen, können Sie sie in eine Funktion wie die folgende einschließen:

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 diese Funktion einfach mit Ihrer benutzerdefinierten Nachricht auf:

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

Navigation wieder aktivieren

Um die Navigation wieder zu aktivieren, müssen Sie nur window.onbeforeunload Auf null setzen. Hier ist es, umhüllt von einer hübschen kleinen Funktion, die überall aufgerufen werden kann:

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

Verwenden von jQuery, um dies an Formelemente zu binden

Wenn Sie jQuery verwenden, kann dies leicht an alle Elemente eines Formulars wie das folgende gebunden werden:

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

Dann, damit das Formular eingereicht werden kann:

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

Dynamisch modifizierte Formulare:

preventNavigation() und enableNavigation() können nach Bedarf an andere Funktionen gebunden werden, z. B. das dynamische Ändern eines Formulars oder das Klicken auf eine Schaltfläche, die ein AJAX sendet Ich habe dazu dem Formular ein verstecktes Eingabeelement hinzugefügt:

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

Jedes Mal, wenn ich verhindern möchte, dass der Benutzer davon navigiert, löse ich die Änderung für diese Eingabe aus, um sicherzustellen, dass preventNavigation() ausgeführt wird:

function somethingThatModifiesAFormDynamically() {

    // Do something that modifies a form

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

Hier probier das es 100% funktioniert

<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>
3
Braydon

Wenn der Benutzer Änderungen am Formular vornimmt, wird ein Boolesches Flag gesetzt. Wenn der Benutzer dann versucht, von der Seite weg zu navigieren, überprüfen Sie dieses Flag im Ereignis window.onunload . Wenn das Flag gesetzt ist, zeigen Sie die Nachricht an, indem Sie sie als Zeichenfolge zurückgeben. Wenn Sie die Nachricht als Zeichenfolge zurückgeben, wird ein Bestätigungsdialogfeld mit Ihrer Nachricht angezeigt.

Wenn Sie Ajax zum Festschreiben der Änderungen verwenden, können Sie das Flag auf false setzen, nachdem die Änderungen festgeschrieben wurden (d. H. Im Ajax-Erfolgsereignis).

2
Kirtan

Die Standardzustände diese Aufforderung kann gesteuert werden, indem das beforeunload -Ereignis abgebrochen wird oder der Rückgabewert auf nicht null gesetzt wird. Außerdem wird angegeben, dass Autoren "Event.preventDefault ()" anstelle von "returnValue" verwenden sollen und dass die dem Benutzer angezeigte Nachricht nicht anpassbar .

Ab 69.0.3497.92 entspricht Chrome nicht dem Standard. Es gibt jedoch ein Fehlerbericht und ein Überprüfung in progress. Chrome erfordert, dass returnValue anhand des Ereignisobjekts festgelegt wird, nicht anhand des vom Handler zurückgegebenen Werts.

Es liegt in der Verantwortung des Autors, zu verfolgen, ob Änderungen vorgenommen wurden. Dies kann mit einer Variablen erfolgen oder indem sichergestellt wird, dass das Ereignis nur bei Bedarf behandelt wird.

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';
2
Trevor Karjanis

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 habe ich etwas Ähnliches in JavaScript gemacht

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!");
}
}
1
Justin

Basierend auf allen Antworten zu diesem Thread habe ich den folgenden Code geschrieben und es hat bei mir funktioniert.

Wenn Sie nur einige Eingabe-/Textarea-Tags haben, für die ein Onunload-Ereignis überprüft werden muss, können Sie HTML5-Datenattribute als data-onunload="true" Zuweisen.

für zb.

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

und das Javascript (jQuery) kann so 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?";   
    };
});
1
Sagar Gala

Sie können ein onchange -Ereignis im Textbereich (oder in anderen Feldern) hinzufügen, das eine Variable in JS festlegt. Wenn der Benutzer versucht, die Seite (window.onunload) zu schließen, überprüfen Sie den Wert dieser Variablen und zeigen die Warnung entsprechend an.

1
Makram Saleh

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

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

0
waqasahmed

Dies kann einfach durch Setzen von ChangeFlag auf true, on onChange event von TextArea erreicht werden. Verwenden Sie Javascript, um das Dialogfeld Bestätigen basierend auf dem Wert ChangeFlag anzuzeigen. Verwerfen Sie das Formular und navigieren Sie zur gewünschten Seite, wenn bestätigen true zurückgibt, andernfalls nichts tun.

0
simplyharsh