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 Що сталася помилка ??
Падманатан Дж.

Ваше повідомлення включає код, який вказує на те, що виконується операція 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теж повинні це спостерігати ), але він не буде працювати для кнопок Назад і Вперед у браузері. Я сподіваюся, що ідеального рішення для цього немає.
noseratio

код чудовий. Я хочу запустити функцію logout (), якщо користувач натискає кнопку виходу "Залишити цю сторінку". Але як я можу визначити, натиснув користувач "Залишити цю сторінку" чи ні?
Bit_hunter

1
Це $(window).on('unload', function()не виконується в Safari.
Аарохі Кулкарні,

1
Запуститься, beforeunloadякщо браузер закривається через вимкнення ОС?
techie_28

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). Повідомлення, яке ви повернете, буде додано лише до повідомлення, поданого Chrome. Ось причина: Як я можу замінити діалогове вікно OnBeforeUnload і замінити його своїм?


3
Станом на jQuery 1.7 .liveзастаріло. Замість нього $(document).on('click', 'a', ...) слід використовувати. .onяк правило, є кращим способом у порівнянні зі старими функціями, так як .bindце було б $('form').on('submit', ...).
t.niese

Я цілком впевнений, що ця відповідь більше не перехресний браузер. Хтось тестував?
A. Wolff

Як зазначено, я лише копіюю / вставляю код. Я відредагую відповідь новітньою версією
Кирило Н.

Дякую, але, на жаль, підтвердження не відображається, коли я закриваю вкладку.
Cris

.. і велику помилку, яку я зробив (клацніть замість beforeunload як подія документа).
Кирило Н.

-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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.