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

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

100
javascript onbeforeunload

9 ответов

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

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

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

120

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

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

18

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

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

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

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

enter image description here

12

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

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

использовать метода onunload.

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

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

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

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

пример JSFiddle

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

3

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

3

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

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

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

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

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

2

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

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

1