Как показать "вы уверены, что хотите уйти с этой страницы?"когда изменения совершаются?

The onbeforeunload Microsoft-ism-это самое близкое к стандартному решению, но имейте в виду, что поддержка браузера неравномерна; например, для Opera он работает только в версии 12 и позже (все еще в бета-версии на момент написания этой статьи).

кроме того, для максимальный, вам нужно сделать больше, чем просто вернуть строку, как описано на Mozilla Developer Network.

пример: определите следующие две функции для включение / выключение навигационной подсказки (ср. пример MDN):

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

затем определите такую форму:

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

таким образом, пользователь будет предупрежден о переходе только в том случае, если он изменил текстовую область, и не будет предложено, когда он фактически отправляет форму.

чтобы сделать эту работу в Chrome и Safari, вам придется сделать это так

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

Ссылка:https://developer.mozilla.org/en/DOM/window.onbeforeunload

С Помощью JQuery это довольно легко сделать. Так как вы можете привязать к наборам.

его недостаточно, чтобы сделать onbeforeunload, вы хотите только вызвать навигацию, если кто-то начал редактировать материал.

jquerys 'beforeunload' отлично работал для меня

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

Это простой способ представить сообщение, если какие-либо данные вводятся в форму, и не показывать сообщение, если форма отправлена:

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

для новых людей, которые ищут простое решение, просто попробовать Areyousure.js

расширить на Кит уже удивительный ответ!--14-->:

настраиваемые предупреждающие сообщения

чтобы разрешить пользовательские предупреждающие сообщения, Вы можете обернуть его в функцию следующим образом:

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

тогда просто вызовите эту функцию с вашим пользовательским сообщением:

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

снова включить навигацию

чтобы снова включить навигацию, все, что вам нужно сделать, это установить window.onbeforeunload до null. Вот он, завернутый в аккуратную маленькую функцию, которая может звоните куда угодно:

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

использование jQuery для привязки этого к элементам формы

при использовании jQuery это может быть легко привязано ко всем элементам такой формы:

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

затем, чтобы разрешить форму для отправки:

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

динамически изменяемые формы:

preventNavigation() и enableNavigation() может быть привязан к любым другим функциям по мере необходимости, таким как динамическое изменение формы или нажатие на кнопку, которая отправляет AJAX запрос. Я сделал это, добавив скрытый элемент ввода в форму:

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

затем каждый раз, когда я хочу, чтобы пользователь не переходил, я запускаю изменение на этом входе, чтобы убедиться, что preventNavigation() запускается на выполнение:

function somethingThatModifiesAFormDynamically() {

    // Do something that modifies a form

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

вот попробуйте это работает 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>

когда пользователь начнет вносить изменения в форму, будет установлен логический флаг. Если пользователь затем пытается перейти от страницы, вы проверяете этот флаг в

вы можете добавить onchange событие в текстовом поле (или в любом другом поле), которое задает переменную в JS. Когда пользователь пытается закрыть страницу (окно.onunload) вы проверяете значение этой переменной и показываете соответствующее предупреждение.

основываясь на всех ответах на эту тему, я написал следующий код, и он работал для меня.

Если у вас есть только некоторые теги ввода/textarea, которые требуют проверки события onunload, вы можете назначить атрибуты данных HTML5 как data-onunload="true"

например.

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

и Javascript (jQuery) может выглядеть так :

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

вот мой 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>

и вот как я сделал что-то подобное в 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!");
}
}

на стандартные государств этот запрос можно контролировать, отменяя beforeunload событие или установка возвращаемого значения в не-null значение. В нем также говорится, что авторы должны использовать событие.preventDefault () вместо returnValue, и сообщение, показанное пользователю не настраиваемая.

по состоянию на 69.0.3497.92, Chrome не соответствует стандарту. Однако, есть сообщить об ошибке подал, и a комментарий в ходе. Chrome требует, чтобы значение returnValue устанавливалось по ссылке на объект события, а не по значению, возвращаемому обработчиком.

автор несет ответственность за отслеживание внесенных изменений; это может быть сделано с помощью переменной или путем обеспечения обработки события только в случае необходимости.

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

Это можно легко сделать, установив ChangeFlag истина, о onChange событие TextArea. Используйте javascript, чтобы показать подтвердить диалоговое окно на основе ChangeFlag значение. Отбросьте форму и перейдите на запрошенную страницу, если подтвердить возвращает true, else вообще ничего.

то, что вы хотите использовать, - это событие onunload в JavaScript.

вот пример:http://www.w3schools.com/jsref/event_onunload.asp

существует параметр "onunload" для тега body, из которого вы можете вызывать функции javascript. Если он возвращает false, он предотвращает навигацию.