JQuery beforeunload пользовательское всплывающее окно для выхода страницы

Привет, я хотел бы настроить свое всплывающее окно, чтобы оставить страницу, есть ли простой способ сделать это?

Я использую простой jQuery

$(document).ready(function() {
    var myPopUp = $('#pop-up').css('display', 'block');
    $(window).bind('beforeunload', function(){
      return 'load my pop up here instead of the default browser message';
    });
});

my html для всплывающего окна, которое по умолчанию скрыто

<div id="pop-up">
  <h2>Are you sure wanna leave</h2>
  <a href="#">Leave</a>
  <a href="#" class="close">Stay</a>
</div>

Спасибо

Ответ 1

Краткий ответ: вы не можете.

Более длинный ответ: по довольно очевидным причинам "безопасности" очень ограничено то, что вы можете сделать, когда пользователь пытается отойти от страницы/закрыть вкладку или любым другим способом покинуть сайт.

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

Поэтому onbeforeunload javascript onbeforeunload - и, соответственно, beforeunload jQuery beforeunload - чрезвычайно ограничены в своих возможностях. Одна из вещей, которые они определенно не могут сделать, - это предотвратить закрытие страницы, за исключением использования одного очень стандартизированного и довольно скучного метода, который браузер (может) позволяет.

Некоторые браузеры позволяют вам указать сообщение, в то время как другие (включая Firefox) даже не позволяют вам изменить сообщение (потому что вы можете обмануть пользователя, спросив: "Могу ли я усыновить вашего нерожденного сына?")... AFAIK большинство браузеров позволяют Вы должны указать строку по вашему выбору в дополнение к стандартному сообщению, которое не может быть изменено. В некоторых браузерах (без основных настольных браузеров) даже отсутствует событие.

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

Подумайте о том, как раздражают сайты, которые ломают кнопку "назад", и представьте, что они могут даже лишить вас возможности закрывать вкладку!

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

Я не люблю onunload и onbeforeunload. Я не думаю, что они должны когда-либо запускаться на моей установке Firefox. Я не думаю, что есть какое-либо полезное применение этих событий, даже благосклонное "у вас несохраненная работа!" всплывающие окна. Когда я говорю своему веб-браузеру закрыть веб-страницу, я не хочу, чтобы веб-страница вообще предотвращала (или задерживала) ее закрытие - вообще никогда.

И просто добавить немного официальной информации:

mozilla.org: WindowEventHandlers.onbeforeunload:

С 25 мая 2011 года в спецификации HTML5 говорится, что вызовы методов window.alert(), window.confirm() и window.prompt() могут игнорироваться во время этого события. Смотрите спецификацию HTML5 для более подробной информации.

Ответ 2

Этот вопрос задан и ответил в нескольких сообщениях stackoverflow, таких как один

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

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