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

Question

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

Answer 1

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

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

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

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- США / документы / Web / События / 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 , но сообщение может работать, а может и не работать в кросс-браузерном режиме, и требует возврата чего-то, что вызывает встроенную подсказку.