Как мне остановить загрузку страницы (навигацию) в JS?

Question

Кто-нибудь знает, как остановить перезагрузку или удаление страницы?

 jQuery (функция ($) {

    / * глобальное уведомление о разгрузке */
    предупреждение = правда;

    if (предупреждение) {
        $(window).bind("unload", function() { 
            if (подтвердите ("Вы хотите покинуть эту страницу") == true) {
                // они нажали ОК
                предупреждение ('ОК');
            } еще {
                // они нажали Отмена
                предупреждение ('отмена');
                вернуть ложь;
            }
        });
    }
}); 

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

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

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

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

Есть идеи?

Answer 1

onbeforeunload это тот, который вы хотите; Ваша функция "должна присвоить строковое значение свойству returnValue объекта Event и вернуть ту же строку". Проверьте документы от Microsoft и Mozilla для деталей.

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

Answer 2

Этот код предупреждает в соответствии с предложением Натали, но отключает предупреждение, если форма на странице была отправлена. Использует JQuery.

var warning = true;
window.onbeforeunload = function() { 
  if (warning) {
    return "You have made changes on this page that you have not yet confirmed. If you navigate away from this page you will lose your unsaved changes";
  }
}

$('form').submit(function() {
   window.onbeforeunload = null;
});

Answer 3

Вы хотите использовать событие onbeforeunload.

Answer 4

window.onbeforeunload = confirmExit;
function confirmExit()
{
    return "You have attempted to leave this page.  If you have made any changes to the fields without clicking the Save button, your changes will be lost.  Are you sure you want to exit this page?";
}

Answer 5

window.onbeforeunload = function() { 
  if (warning) {
    return 'You have made changes on this page that you have not yet confirmed. 
    If you navigate away from this page you will loose your unsaved changes';
  }
}

не поддерживается в Chrome, Safari и Opera

Answer 6

Как сказано в этом комментарии, ничто в jQuery не привязывается кbeforeunload событие.

@karim79: нет. В jQuery нет ничего, что связывалось бы с функцией beforeunload; "unload" привязывается к событию "unload". Поищите источник, если вы мне не верите;-) - NickFitz

Итак, вам нужно использовать чистый Javascript для привязки функции к beforeunload событие.

var warning = true;
$("form").submit(function() {
  warning = false;
});
$('#exit').click(function() {
  window.location.replace('https://stacksnippets.net/js')
});
window.onbeforeunload = function() {
  if(warning) {
    return true;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<form>
<input type="submit">
</form>

Answer 7

Попробуй это

          window.addEventListener('beforeunload', function (event) {
      event.preventDefault();

      event.returnValue = 'Are you sure you want to leave this page?';
    });

Answer 8

Попробуйте использовать e.preventDefault() вместо возвращения ложного. 'e' будет первым аргументом вашего обратного вызова unload.