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

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

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

window.onbeforeunload = function() {
  return "";
}

Примечание. Возвращается пустая строка, поскольку новые браузеры предоставляют сообщение типа «Любые несохраненные изменения будут потеряны», которое нельзя изменить.

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

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

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

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

В итоге я получил немного другую версию:

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

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

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

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

window.addEventListener('beforeunload', (event) => {
  // Cancel the event as stated by the standard.
  event.preventDefault();
  // Chrome requires returnValue to be set.
  event.returnValue = '';
});

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

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

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

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

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

Пример JSFiddle

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

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

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

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

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

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

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

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

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

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

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