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

Здесь, в stackoverflow, если вы начали вносить изменения, вы пытаетесь перейти от страницы, появляется кнопка подтверждения javascript и спрашивает: "Вы уверены, что хотите перейти от этой страницы?" blee blah bloo...

Кто-нибудь реализовал это раньше, как мне отслеживать, какие изменения были совершены? Я считаю, что я мог бы сделать это сам, я пытаюсь выучить от вас хорошие практики.

Я пробовал следующее, но все еще не работает:

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

Может ли кто-нибудь опубликовать пример?

Ответы

Ответ 1

Обновление (2017)

Современные браузеры теперь считают, что пользовательское сообщение является угрозой безопасности, и поэтому было удалено из всех них. Теперь в браузерах отображаются только общие сообщения. Поскольку нам больше не нужно беспокоиться о настройке сообщения, это так же просто, как:

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

Читайте ниже для поддержки старого браузера.

Обновление (2013)

Оригинальный ответ подходит для IE6-8 и FX1-3.5 (это то, что мы планировали в 2009 году, когда оно было написано), но сейчас устарело и не будет работать в большинстве современных браузеров - я 'оставил его ниже для справки.

window.onbeforeunload не обрабатывается последовательно всеми браузерами. Это должна быть ссылка на функцию, а не строка (как указывал первоначальный ответ), но это будет работать в старых браузерах, потому что проверка большинства из них, по-видимому, связана с тем, назначено ли что-либо для onbeforeunload (включая функцию, которая возвращает null).

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

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

У вас не может быть того, что confirmOnPageExit выполнить проверку и вернуть значение null, если вы хотите, чтобы пользователь продолжал работу без сообщения. Вам все равно нужно удалить мероприятие, чтобы надежно включить и выключить его:

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

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

Оригинальный ответ (работал в 2009 году)

Чтобы включить его:

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

Чтобы отключить его:

window.onbeforeunload = null;

Имейте в виду, что это не нормальное событие - вы не можете привязываться к нему стандартным способом.

Проверить значения? Это зависит от вашей рамки проверки.

В jQuery это может быть что-то вроде (очень простой пример):

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

Ответ 2

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>

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

Ответ 3

Чтобы сделать эту работу в Chrome и Safari, вам нужно будет сделать это, как это.

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

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

Чтобы расширить на Кит уже потрясающий ответ:

Пользовательские предупреждающие сообщения

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

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");
    // ...
}

Ответ 9

Здесь попробуйте это, он работает на 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>

Ответ 10

Когда пользователь начинает вносить изменения в форму, будет установлен логический флаг. Если пользователь затем пытается перейти от страницы, вы проверяете этот флаг в событии window.onunload. Если флаг установлен, вы показываете сообщение, возвращая его как строку. Возврат сообщения в виде строки приведет к отображению диалогового окна подтверждения, содержащего ваше сообщение.

Если вы используете ajax для фиксации изменений, вы можете установить флаг false после того, как изменения были зафиксированы (т.е. в событии успеха ajax).

Ответ 11

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

Ответ 12

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

Если у вас есть только те тэги input/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?";   
    };
});

Ответ 13

вот мой 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!");
}
}

Ответ 14

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

Ответ 15

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