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

Question

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

Answer 1

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

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

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

Answer 2

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

В отличие от других методов, представленных здесь, этот фрагмент кода не заставит браузер отображать предупреждение, спрашивающее пользователя, хочет ли он выйти; вместо этого он использует четную природу 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 4

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

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

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

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

Answer 5

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

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

Answer 6

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

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

Пример JSFiddle

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

Answer 7

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

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

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

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

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

Answer 8

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

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

Answer 9

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

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

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

Answer 10

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

      window.onbeforeunload = null;