JavaScript перед тем, как покинуть страницу

234

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

<script type="text/javascript">
function con() {
    var answer = confirm("do you want to check our other products")
    if (answer){

        alert("bye");
    }
    else{
        window.location = "http://www.example.com";
    }
}
</script>
</head>

<body onunload="con();">
<h1 style="text-align:center">main page</h1>
</body>
</html>

Но это подтверждают после того, как страница уже закрыта? Как это сделать правильно?

Было бы еще лучше, если бы кто-нибудь показал, как это сделать с помощью jQuery?

javascript jquery

— KD7
источник

1

ха-ха-ха ... да, это совершенно верно .. но, к счастью, это не мой сайт ... мой клиент просит сделать это на его стороне

— kd7

25

Да, но я действительно рад видеть эти предупреждения, когда я собираюсь выйти из несохраненной страницы Gmail.

— Etdashou

Обратите внимание, что в Firefox 4+ вместо вашего настраиваемого сообщения отображается только сообщение по умолчанию developer.mozilla.org/en-US/docs/Web/Events/beforeunload#Notes

— baptx

4

Возможный дубликат пользователя Warn перед тем, как покинуть веб-страницу с несохраненными изменениями

— Wasim A.

352

onunload(или onbeforeunload) не может перенаправить пользователя на другую страницу. Это из соображений безопасности.

Если вы хотите показать подсказку до того, как пользователь покинет страницу, используйте onbeforeunload:

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

Или с помощью jQuery:

$(window).bind('beforeunload', function(){
  return 'Are you sure you want to leave?';
});

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

Вы можете использовать onunloadчто-то перед тем, как страница будет выгружена, но вы не можете перенаправить оттуда (Chrome 14+ блокирует оповещения внутри onunload):

window.onunload = function() {
    alert('Bye.');
}

Или с помощью jQuery:

$(window).unload(function(){
  alert('Bye.');
});

— Ракета Хазмат
источник

12

@Joseph: Когда вы возвращаете строку из onbeforeunload, браузер помещает эту строку в собственное окно подтверждения. Использование confirmбесполезно в onunloadи onbeforeunload, потому что только браузер может контролировать, куда он идет, а не вы. Проверьте это демо: jsfiddle.net/3kvAC

— Rocket Hazmat

7

Просто примечание, если вы хотите условно отобразить сообщение onbeforeunload, return falseзаставит браузер показывать «false» в диалоговом окне. Это необходимо, return undefinedесли вы хотите, чтобы окно закрылось без предупреждения пользователя.

— Дэн Фитч

5

@Adam: Firefox решил запретить настройку этого сообщения. Это часть браузера, поэтому вы не можете изменить это поведение. Другие браузеры также могут удалять возможность настроить сообщение. См .: developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/…

— Rocket Hazmat

8

@RocketHazmat Chrome тоже. Теперь он говорит только: Вы хотите покинуть этот сайт? Внесенные вами изменения не могут быть сохранены.

— programmer5000

6

@ programmer5000 Это хорошо, потому что некоторые вредоносные веб-сайты могут показывать некоторые бесполезные предупреждения (например, «Вы не можете уйти, не предоставив информацию о своем банке»)

— Наман

34

Этот код, когда вы также обнаруживаете изменение формы или нет.

$('#form').data('serialize',$('#form').serialize()); // On load save form current state

$(window).bind('beforeunload', function(e){
    if($('#form').serialize()!=$('#form').data('serialize'))return true;
    else e=null; // i.e; if form state change show warning box, else don't show it.
});

Вы можете использовать функцию Google JQuery Form Serialize, которая соберет все входные данные формы и сохранит их в массиве. Я думаю, этого объяснения достаточно :)

— Васим А.
источник

Любая идея, почему это не будет работать? Может ли он быть перезаписан другими плагинами js-функций / jquery? Я запускаю приложение webrtc, и я хотел бы «закрыть» некоторые вещи, когда клиент закрывает окно, поэтому необходимо обработать закрытие окна.

— Привет,

1

это может быть перезаписано любым другим плагином и т. д., в основном разработчик допустил ошибку с селектором, если вы сомневаетесь в перезаписи, поместите код jquery перед закрытием тега </ body>.

— Васим А.

Да ... если у вас есть некоторый код JS, который скрывает или отключает поля ввода после загрузки страницы, то при выполнении проверки для сравнения скрытых \ отключенных полей сериализация не выполняется. Проверка провалится, конечно. ;) Есть этот обходной путь: stackoverflow.com/a/4748748/114029

— Лениэль Маккаферри

Кстати ... есть лучший способ здесь: stackoverflow.com/q/16322042/114029

— Лениэль Маккаферри

1

Следует отметить, что это также вызовет предупреждение при нажатии кнопки отправки. Чтобы избежать этого, можно снова сериализовать форму по нажатию кнопки «Отправить».

— Адам

19

Это предупредит при выходе с текущей страницы

<script type='text/javascript'>
function goodbye(e) {
    if(!e) e = window.event;
    //e.cancelBubble is supported by IE - this will kill the bubbling process.
    e.cancelBubble = true;
    e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog

    //e.stopPropagation works in Firefox.
    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}
window.onbeforeunload=goodbye; 

</script>

— Аджит Сингх
источник

14

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

window.onbeforeunload = function () {
            if (isDirty) {
                return "There are unsaved data.";
            }
            return undefined;
        }

возвращение "undefined" отключит подтверждение

Примечание: возвращение «ноль» не будет работать с IE

Также вы можете использовать «undefined», чтобы отключить подтверждение

window.onbeforeunload = undefined;

— Мина Матта
источник

11

Для того, чтобы иметь popop с Chrome 14+, вам нужно сделать следующее:

jQuery(window).bind('beforeunload', function(){
    return 'my text';
});

Пользователю будет задан вопрос, хочет ли он остаться или уйти.

— Дэвид Беланджер
источник

Есть идеи, почему это не работает? Я использую Chrome (последняя версия) вместе с множеством плагинов JQuery, но я не получаю никаких уведомлений, когда я закрываю окно.

— Привет,

@hey Почему голосование против? Это работает .... Вы должны убедиться, что это за пределами, jQuery(document)и я предлагаю поставить это правильно после того, как все ваши плагины загружены. Кроме того, этот фрагмент не делает никаких предупреждений ... это всего лишь демонстрация с return.

— Дэвид Беланджер

7

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

window.onbeforeunload = s => "";

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

— spencer.sm
источник

это также срабатывает, если я обновляю страницу или просто выхожу?

— Si8

Да, он будет срабатывать при обновлении или выходе.

— spencer.sm

Есть ли какой-нибудь способ узнать, когда он обновляется, а когда - в первый раз?

— Si8

Когда пользователь впервые заходит на страницу, а не обновляет страницу.

— Si8

О нет. Он не будет запущен, когда пользователь впервые заходит на страницу. Только при закрытии или смене страниц или обновлении.

— spencer.sm

4

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

Используйте этот подход, чтобы показать сообщение, только когда пользователь что-то изменил

var form = $('#your-form'),
  original = form.serialize()

form.submit(function(){
  window.onbeforeunload = null
})

window.onbeforeunload = function(){
  if (form.serialize() != original)
    return 'Are you sure you want to leave?'
}

— Саймон Франзен
источник

3

<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">

<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>

<a href="https://www.w3schools.com">Click here to go to w3schools.com</a>

<script>
function myFunction() {
    return "Write something clever here...";
}
</script>

</body>
</html>

https://www.w3schools.com/tags/ev_onbeforeunload.asp

— Эмир Мамашов
источник

2

Большинство решений здесь не работает для меня, поэтому я использовал найденное здесь

Я также добавил переменную, чтобы разрешить окно подтверждения или нет

window.hideWarning = false;
window.addEventListener('beforeunload', (event) => {
    if (!hideWarning) {
        event.preventDefault();
        event.returnValue = '';
    }

});

— Радж Шарма
источник

1

Еще немного полезнее, включи и отключи

$(window).on('beforeunload.myPluginName', false); // or use function() instead of false
$(window).off('beforeunload.myPluginName');

— l2aelba
источник