jquery beforeunload при закрытии (не покидании) страницы?

83

Как я могу отобразить «Вы уверены, что хотите покинуть страницу?» когда пользователь фактически пытается закрыть страницу (нажмите кнопку 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
Вы не можете. Вы не можете программно определить разницу между закрытием браузера или уходом пользователя с вашей страницы.
meagar
@Cris Что за ошибка ??
Padmanathan J
В вашем сообщении содержится код, указывающий на выполнение операции Ajax. Есть ли какие-то из них, которые нам нужно учитывать? (потому что, кроме этого кода, вы не упомянули его явно)
Кирилл Н.
вы не можете определить, закрыто ли окно или перейти к другому URL-адресу, учтите, что если вы используете браузер с несколькими вкладками, это не имеет значения, но если вы используете хеш-навигацию (например, yourdomain.com/#path=/index / news & id = 1 ), вы можете управлять им, бросая javascript при навигации
alphakevin

Ответы:

145

Вы можете сделать это с помощью 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
Это хороший вариант (вам, вероятно, onsubmitтоже стоит присмотреться ), но он не будет работать для кнопок браузера «Назад» и «Вперед». Я полагаю, что для этого нет идеального решения.
Носератио
код в порядке. Я хочу запустить функцию выхода из системы, если пользователь нажимает всплывающую кнопку «Покинуть эту страницу». Но как я могу определить, нажал ли пользователь «Покинуть страницу» или нет?
Bit_hunter 01
1
Это $(window).on('unload', function()не выполняется в Safari.
Аарохи Кулкарни
1
Сработает, beforeunloadесли браузер закрывается из-за выключения ОС?
techie_28 08
4
Вы больше не можете предоставлять пользовательские сообщения в Chrome или Firefox (потому что они хотят предотвратить мошенничество): developers.google.com/web/updates/2016/04/…
Адам,
12

Попробуйте использовать 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.';
    }
};

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

ДЕМО: http://jsfiddle.net/DerekL/GSWbB/show/

Падманатан Дж.
источник
12

Кредит должен быть здесь: как определить, была ли нажата ссылка при срабатывании 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?');
}
Энди Мерхо
источник
2

Как указано здесь https://stackoverflow.com/a/1632004/330867 , вы можете реализовать это, «фильтруя» то, что является источником выхода с этой страницы.

Как упоминалось в комментариях, вот новая версия кода в другом вопросе, которая также включает запрос 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's 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 и заменить его своим собственным?

Кирилл Н.
источник
3
По состоянию на jQuery 1.7 .liveустарел. Вместо него $(document).on('click', 'a', ...) следует использовать. .onобычно предпочтительнее старых функций, так .bindи было бы $('form').on('submit', ...).
t.niese
Я совершенно уверен, что этот ответ больше не кроссбраузерно. Кто-то это тестировал?
A. Wolff
Как уже говорилось, я только скопировал / вставил код. Отредактирую ответ последней версией
Кирилл Н.
Спасибо, но, к сожалению, подтверждение не появляется, когда я закрываю вкладку.
Cris
.. и большая ошибка, которую я сделал (щелкните, а не перед выгрузкой как событие документа).
Кирилл Н.
-1

Попробуйте это, загрузив данные через 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>
радуны
источник
1
Не рекомендуется заставлять пользователя ждать ответа синхронного вызова AJAX каждый раз, когда он щелкает ссылку на вашем сайте.
mattalxndr 03