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

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

243 голосов
/ 13 июля 2009

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

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

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

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

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

Ответы [ 17 ]

2 голосов
/ 17 сентября 2018

Стандарт заявляет , что запросом можно управлять, отменяя событие beforeunload или устанавливая возвращаемое значение равным ненулевое значение . В нем также говорится, что авторы должны использовать 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';
1 голос
/ 19 февраля 2015

вот мой 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!");
}
}
1 голос
/ 13 июля 2009

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

1 голос
/ 22 февраля 2013

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

Если у вас есть только некоторые теги 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?";   
    };
});
0 голосов
/ 13 июля 2009

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

0 голосов
/ 13 июля 2009

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

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

0 голосов
/ 13 июля 2009

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

Страница:
...