Запретить навигацию веб-страницы с помощью JavaScript

Ответ 1

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

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

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

Ответ 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);
})();

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

Ответ 3

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

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

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

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

Ответ 4

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

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

Ответ 5

Используйте onunload.

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

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

Ответ 6

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

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

Пример JSFiddle

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

Ответ 7

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

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

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

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

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

Ответ 8

Эквивалент более современному и совместимому с браузером способу, используя современные 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