Предотвращение перехода веб-страницы с помощью JavaScript

Question

Как предотвратить переход веб-страницы с помощью JavaScript?

Answer 1

Использование onunload позволяет отображать только сообщения, но не прерывает навигацию (потому что уже слишком поздно). Однако вы можете использовать onbeforeunload, и это прервет навигацию:

window.onbeforeunload = function() {
  return "Are you sure you want to navigate away?";
}

Редактировать : Удалено confirm() в операторе возврата, так как это вызвало окно подтверждения, как и ожидалось, но также показало второе подтверждение с результатом первого подтверждения.

Answer 2

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

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

(function () {
    var location = window.document.location;

    var preventNavigation = function () {
        var originalHashValue = location.hash;

        window.setTimeout(function () {
            location.hash = 'preventNavigation' + ~~ (9999 * Math.random());
            location.hash = originalHashValue;
        }, 0);
    };

    window.addEventListener('beforeunload', preventNavigation, false);
    window.addEventListener('unload', preventNavigation, false);
})();

Отказ от ответственности: Вы никогда не должны этого делать. Если на странице есть код для удаления фрейма, пожалуйста, уважайте пожелания автора.

Answer 3

Я закончил с этой немного другой версией:

var dirty = false;
window.onbeforeunload = function() {
    return dirty ? "If you leave this page you will lose your unsaved changes." : null;
}

В других местах я устанавливаю флаг «грязный» в значение «истина», когда форма загрязняется (или я иначе хочу предотвратить переход). Это позволяет мне легко контролировать, получает ли пользователь запрос подтверждения навигации.

С текстом в выбранном ответе вы видите избыточные подсказки:

Answer 4

В примере с Ayman, возвращая false, вы предотвращаете закрытие окна / вкладки браузера.

window.onunload = function () {
  alert('You are trying to leave.');
  return false;
}

Answer 5

Эквивалент более современным и совместимым с браузером способом с использованием современных API-интерфейсов addEventListener.

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";

  e.returnValue = confirmationMessage;     // Gecko and Trident
  return confirmationMessage;              // Gecko and WebKit
});

Источник: https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload

Answer 6

Эквивалент принятого ответа в jQuery 1.11:

$(window).on("beforeunload", function () {
    return "Please don't leave me!";
});

Пример JSFiddle

В ответе altCognito использовалось событие unload, которое слишком поздно для JavaScript, чтобы прервать навигацию.

Answer 7

Использовать onunload .

Для jQuery, я думаю, это работает так:

$(window).unload(function() { 
  alert("Unloading"); 
  return falseIfYouWantToButBeCareful();
});

Answer 8

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

В chrome после пользовательского сообщения отображается текст: «Вы действительно хотите покинуть эту страницу?». В Firefox он вообще не отображает наше пользовательское сообщение об ошибке (но все равно отображает диалоговое окно).

Более подходящее сообщение об ошибке может быть:

window.onbeforeunload = function() {
    return "If you leave this page, you will lose any unsaved changes.";
}

Или стиль stackoverflow: «Вы начали писать или редактировать сообщение.»

Answer 9

Если вы ловите кнопку браузера назад / вперед и не хотите перемещаться, вы можете использовать:

window.addEventListener('popstate', function() {
    if (window.location.origin !== 'http://example.com') {
        // Do something if not your domain
    } else if (window.location.href === 'http://example.com/sign-in/step-1') {
        window.history.go(2); // Skip the already-signed-in pages if the forward button was clicked
    } else if (window.location.href === 'http://example.com/sign-in/step-2') {
        window.history.go(-2); // Skip the already-signed-in pages if the back button was clicked
    } else {
        // Let it do its thing
    }
});

В противном случае вы можете использовать событие beforeunload , но сообщение может работать или не работать в кросс-браузерном режиме и требует возврата чего-то, что вызывает встроенную подсказку.