Jak pokazać "czy na pewno chcesz nawigować z dala od tej strony?"kiedy zmiany popełnione?

The onbeforeunload Microsoft-ism jest najbliższą rzeczą, jaką mamy do standardowego rozwiązania, ale należy pamiętać, że obsługa przeglądarki jest nierówna; np. dla Opery działa tylko w wersji 12 i późniejszej (wciąż w wersji beta od tego pisania).

Ponadto, dla maksymalnej kompatybilności , musisz zrobić więcej niż tylko zwrócić ciąg znaków, jak wyjaśniono w Mozilla Developer Network.

Przykład: Zdefiniuj następujące dwie funkcje do włączania/wyłączania zachęty nawigacyjnej (por. na Przykład MDN):

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

Następnie zdefiniuj taką formę:

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

W ten sposób użytkownik zostanie ostrzeżony tylko wtedy, gdy zmieni obszar tekstowy i nie zostanie wyświetlony monit, gdy faktycznie przesyła formularz.

Aby to działało w Chrome i Safari, musisz to zrobić w ten sposób

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

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

Z JQuery to jest dość łatwe do zrobienia. Ponieważ można wiązać do zestawów.

Its NOT enough to do the onbeforeunload, you want to trigger the navigate away if someone started editing stuff.

Jquerys 'beforeunload' pracował dla mnie świetnie

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

Jest to łatwy sposób na przedstawienie wiadomości, Jeśli jakiekolwiek dane są wprowadzane do formularza, a nie Wyświetlanie wiadomości, Jeśli formularz jest złożony:

$(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;
    });
})

Dla nowych ludzi, którzy szukają prostego rozwiązania, po prostu spróbuj Areyousure.js

Do rozwinięcia na Keith ' s already amazing answer :

Niestandardowe komunikaty ostrzegawcze

Aby umożliwić niestandardowe komunikaty ostrzegawcze, możesz zawinąć je w funkcję taką jak:

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;
}

Następnie po prostu wywołaj tę funkcję z niestandardową wiadomością:

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

Ponowne włączenie nawigacji

Aby ponownie włączyć nawigację, wystarczy ustawić window.onbeforeunload na null. Oto ona, owinięta w zgrabną, małą funkcję, którą można wywołać w dowolnym miejscu:

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

Używanie jQuery aby powiązać to z elementami formularza

Jeśli używasz jQuery, można to łatwo powiązać ze wszystkimi elementami formularza takiego jak:

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

Następnie, aby umożliwić złożenie formularza:

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

Formularze dynamicznie modyfikowane:

preventNavigation() i enableNavigation() mogą być powiązane z dowolnymi innymi funkcjami w razie potrzeby, takimi jak dynamiczna modyfikacja formularza lub kliknięcie przycisku, który wysyła żądanie AJAX. Zrobiłem to, dodając ukryty element wejściowy do formularza:

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

Wtedy za każdym razem I aby uniemożliwić użytkownikowi nawigację, uruchamiam zmianę na tym wejściu, aby upewnić się, że preventNavigation() zostanie wykonana:

function somethingThatModifiesAFormDynamically() {

    // Do something that modifies a form

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

Tutaj spróbuj to działa 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>

Gdy użytkownik zacznie wprowadzać zmiany w formularzu, zostanie ustawiony znacznik logiczny. Jeśli użytkownik spróbuje odsunąć się od strony, Zaznacz tę flagę w oknie .Zdarzenie onunload. Jeśli flaga jest ustawiona, wyświetlana jest wiadomość, zwracając ją jako ciąg znaków. Zwrócenie wiadomości jako ciągu znaków spowoduje wyświetlenie okna dialogowego potwierdzenia zawierającego Twoją wiadomość.

Jeśli używasz ajax do zatwierdzania zmian, możesz ustawić flagę na false po zatwierdzeniu zmian (np. w ajax success event).

Możesz dodać zdarzenie onchange do pola textarea (lub dowolnych innych pól), które ustawia zmienną w JS. Gdy użytkownik próbuje zamknąć stronę (window.onunload) sprawdzasz wartość tej zmiennej i odpowiednio wyświetlasz alert.

Bazując na wszystkich odpowiedziach w tym wątku, napisałem poniższy kod i zadziałał dla mnie.

Jeśli masz tylko niektóre znaczniki input/textarea, które wymagają sprawdzenia zdarzenia onunload, możesz przypisać atrybuty danych HTML5 jako data-onunload="true"

Dla np.

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

A Javascript (jQuery) może wyglądać tak:

$(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?";   
    };
});

Oto mój 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>

I tak właśnie zrobiłem coś podobnego w 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!");
}
}

Standardowe Stany można kontrolować poprzez anulowanie zdarzenia beforeunload lub ustawienie wartości zwracanej na wartość inną niż null . Stwierdza również, że autorzy powinni używać Event.preventDefault () zamiast returnValue, a wiadomość wyświetlana użytkownikowi nie jest konfigurowalna .

Obowiązkiem autora jest śledzenie, czy zmiany zostały wprowadzone; można to zrobić za pomocą zmiennej lub upewniając się, że zdarzenie jest obsługiwane tylko wtedy, gdy jest to konieczne.

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';

Można to łatwo zrobić, ustawiając ChangeFlag na true, na onChange Zdarzenie TextArea. Użyj javascript, aby wyświetlić okno dialogowe potwierdź na podstawie wartości ChangeFlag . Odrzuć formularz i przejdź do żądanej strony, Jeśli potwierdź zwróci true, w przeciwnym razie nie rób nic.

To, czego chcesz użyć, to zdarzenie onunload w JavaScript.

Oto przykład: http://www.w3schools.com/jsref/event_onunload.asp

Istnieje parametr" onunload " dla tagu body, z którego można wywoływać funkcje javascript. Jeśli zwróci false, uniemożliwia nawigację.