Jquery beforeunload при закрытии (не оставляя) страницы?

Как я могу отобразить "Вы уверены, что хотите покинуть страницу?" когда пользователь фактически пытается закрыть страницу (нажмите кнопку X в окне браузера или вкладке), а не когда он попытается перейти от страницы (щелкните по другой ссылке).

Мой клиент хочет, чтобы сообщение появлялось, когда пользователь пытается закрыть страницу "Вы уверены, что хотите покинуть страницу? У вас все еще есть элементы в корзине покупок".

К сожалению, $(window).bind('beforeunload') не срабатывает, только когда пользователь закрывает страницу.

JQuery

function checkCart() { 
  $.ajax({
    url : 'index.php?route=module/cart/check',
    type : 'POST',
    dataType : 'json',
    success : function (result) {
       if (result) {
        $(window).bind('beforeunload', function(){
          return 'leave?';
        });
       }
    }
  })
}

Ответы

Ответ 1

Вы можете сделать это, используя JQuery.

Для примера,

<a href="your URL" id="navigate"> click here </a>

Ваш JQuery будет,

$(document).ready(function(){

    $('a').on('mousedown', stopNavigate);

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

function stopNavigate(){    
    $(window).off('beforeunload');
}

И чтобы получить сообщение Оставить сообщение,

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

$(window).on('unload', function(){

         logout();

});

Это решение работает во всех браузерах, и я его протестировал.

Ответ 2

Кредит должен идти здесь: как определить, была ли нажата ссылка при запуске window.onbeforeunload?

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

var link_was_clicked = false;
document.addEventListener("click", function(e) {
   if (e.target.nodeName.toLowerCase() === 'a') {
      link_was_clicked = true;
   }
}, true);

window.onbeforeunload = function(e) {
    if(link_was_clicked) {
        return;
    }
    return confirm('Are you sure?');
}

Ответ 3

Попробуйте javascript в своем Ajax

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

Ссылка ссылка

Пример 2:

document.getElementsByClassName('eStore_buy_now_button')[0].onclick = function(){
    window.btn_clicked = true;
};
window.onbeforeunload = function(){
    if(!window.btn_clicked){
        return 'You must click "Buy Now" to make payment and finish your order. If you leave now your order will be canceled.';
    }
};

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

DEMO: http://jsfiddle.net/DerekL/GSWbB/show/

Ответ 4

Как указано здесь fooobar.com/questions/16562/..., вы можете реализовать его, "фильтруя" то, что происходит с выходом этой страницы.

Как упоминается в комментариях, здесь новая версия кода в другом вопросе, который также включает запрос ajax, который вы задаете в своем вопросе:

var canExit = true;

// For every function that will call an ajax query, you need to set the var "canExit" to false, then set it to false once the ajax is finished.

function checkCart() {
  canExit = false;
  $.ajax({
    url : 'index.php?route=module/cart/check',
    type : 'POST',
    dataType : 'json',
    success : function (result) {
       if (result) {
        canExit = true;
       }
    }
  })
}

$(document).on('click', 'a', function() {canExit = true;}); // can exit if it a link
$(window).on('beforeunload', function() {
    if (canExit) return null; // null will allow exit without a question
    // Else, just return the message you want to display
    return "Do you really want to close?";
});

Важно. Вы не должны определять глобальную переменную (здесь canExit), это здесь для более простой версии.

Обратите внимание, что вы не можете полностью переопределить сообщение подтверждения (по крайней мере, в хроме). Сообщение, которое вы возвращаете, будет добавлено только к тому, которое указано в Chrome. Вот почему: Как я могу переопределить диалог OnBeforeUnload и заменить его своим?

Ответ 5

Попробуйте это, загрузив данные через ajax и показывая с помощью оператора return.

<script type="text/javascript">
function closeWindow(){

    var Data = $.ajax({
        type : "POST",
        url : "file.txt",  //loading a simple text file for sample.
        cache : false,
        global : false,
        async : false,
        success : function(data) {
            return data;
        }

    }).responseText;


    return "Are you sure you want to leave the page? You still have "+Data+" items in your shopping cart";
}

window.onbeforeunload = closeWindow;
</script>

Ответ 6

jQuery Решение:

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

Кроме того, вы можете добавить свое собственное сообщение в поле подтверждения:

$(window).bind('beforeunload', function(){
    return '>>>>>Before You Go<<<<<<<< \n Your custom message go here';
});

P.S: Событие 'beforeunload' поддерживается с jQuery 1.4.

JavaScript:

Для IE и FF < 4, установите window.event.returnValue в строку, которую вы хотите отобразить, а затем верните ее для Safari (вместо этого используйте null, чтобы разрешить нормальное поведение):

window.onbeforeunload = function (e) {
    var e = e || window.event;

    // For IE and Firefox prior to version 4
    if (e) {
        e.returnValue = 'Any string';
    }

    // For Safari
    return 'Any string';
};