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

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

Вопрос

Здесь, в 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>

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

Это было полезно?

Решение

Обновление (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?";
});

Другие советы

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

Кроме того, для максимальная совместимость, вам нужно сделать больше, чем просто вернуть строку, как описано в Сеть разработчиков Mozilla.

Пример: Определите следующие две функции для включения/выключения навигационной подсказки (см.пример 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

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

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

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

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>

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

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

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

По состоянию на 69.0.3497.92 Chrome не соответствует стандарту.Однако существует отчет об ошибке подан, и обзор находится в процессе.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';

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

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

Если у вас есть только несколько тегов ввода/текстовой области, для которых требуется проверка события 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!");
}
}

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

Вы хотите использовать событие onunload в JavaScript.

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top