JavaScript перед выходом на страницу

Я хочу сделать подтверждение, прежде чем пользователь покинет страницу. Если он говорит "ОК", он перенаправляется на новую страницу или отменяет ее. Я попытался сделать это с 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?

Ответ 1

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

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

Чтобы иметь popup с Chrome 14+, вам необходимо сделать следующее:

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

Пользователю будет предложено оставить его или оставить.

Ответ 5

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

window.onbeforeunload = s => "";

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

Ответ 6

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

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

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

Примечание: возврат "null" не будет работать с IE

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

window.onbeforeunload = undefined;

Ответ 7

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

Ответ 8

Немного более полезно, включить и отключить

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

Ответ 9

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

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

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?'
}