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

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

9 100
javascript onbeforeunload

9 ответов:

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

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

Edit: удалены 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

в Примере Аймана, возвращая 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