Не дозволяйте веб-сторінці переходити за допомогою 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;
}

В іншому випадку я встановив брудний прапор істинним, коли форма забруднилася (або я інакше хочу запобігти навігації). Це дозволяє мені легко контролювати, отримує чи не користувач підказка «Підтвердити навігацію».

З текстом у вибраній відповіді ви бачите зайві підказки:

Еквівалент більш сучасним і сумісним для браузера способом, використовуючи сучасні 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

У прикладі Аймана, повертаючи помилку, ви не дозволяєте закрити вікно / вкладку браузера.

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();
});

Пропоноване повідомлення про помилку може дублювати повідомлення про помилку, яке браузер уже відображає. У хромі 2 подібних повідомлення про помилки відображаються одне за одним у тому ж вікні.

У хромі, текст, який відображається після користувацького повідомлення: "Ви впевнені, що хочете залишити цю сторінку?". У 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 подія, але повідомлення може або не може працювати крос-браузер, і вимагає повернення то , що сили , вбудований в рядку.