Ngăn chặn một trang web điều hướng đi bằng JavaScript

Làm cách nào để ngăn chặn một trang web điều hướng đi bằng JavaScript?

Việc sử dụng onunloadcho phép bạn hiển thị tin nhắn, nhưng sẽ không làm gián đoạn điều hướng (vì quá muộn). Tuy nhiên, việc sử dụng onbeforeunloadsẽ làm gián đoạn điều hướng:

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

Lưu ý: Một chuỗi trống được trả về vì các trình duyệt mới hơn cung cấp một thông báo như "Mọi thay đổi chưa được lưu sẽ bị mất" không thể bị ghi đè.

Trong các trình duyệt cũ hơn, bạn có thể chỉ định thông báo sẽ hiển thị trong lời nhắc:

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

Không giống như các phương pháp khác được trình bày ở đây, đoạn mã này sẽ không khiến trình duyệt hiển thị cảnh báo hỏi người dùng nếu anh ta muốn rời đi; thay vào đó, nó khai thác tính chất sự kiện của DOM để chuyển hướng trở lại trang hiện tại (và do đó hủy điều hướng) trước khi trình duyệt có cơ hội dỡ nó khỏi bộ nhớ.

Vì nó hoạt động bằng cách điều hướng ngắn mạch trực tiếp, nên nó không thể được sử dụng để ngăn trang bị đóng; tuy nhiên, nó có thể được sử dụng để vô hiệu hóa khung hình.

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

Tuyên bố từ chối trách nhiệm: Bạn không bao giờ nên làm điều này. Nếu một trang có mã phá vỡ khung trên đó, vui lòng tôn trọng mong muốn của tác giả.

Tôi đã kết thúc với phiên bản hơi khác này:

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

Ở những nơi khác, tôi đặt cờ bẩn thành đúng khi biểu mẫu bị bẩn (hoặc nếu không tôi muốn ngăn điều hướng đi). Điều này cho phép tôi dễ dàng kiểm soát xem người dùng có nhận được lời nhắc Xác nhận điều hướng hay không.

Với văn bản trong câu trả lời đã chọn, bạn sẽ thấy các lời nhắc thừa:

Tương đương theo cách hiện đại hơn và tương thích với trình duyệt, sử dụng API addEventListener hiện đại.

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

Nguồn: https://developer.mozilla.org/en-US/docs/Web/Events/b Beforeunload

Trong ví dụ của Ayman bằng cách trả về false, bạn sẽ ngăn cửa sổ / tab trình duyệt đóng lại.

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

Tương đương với câu trả lời được chấp nhận trong jQuery 1.11:

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

Ví dụ về JSFiddle

Câu trả lời của altCognito đã sử dụng unloadsự kiện xảy ra quá muộn để JavaScript hủy bỏ điều hướng.

Sử dụng onunload .

Đối với jQuery, tôi nghĩ rằng điều này hoạt động như vậy:

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

Thông báo lỗi được đề xuất đó có thể nhân đôi thông báo lỗi mà trình duyệt đã hiển thị. Trong chrome, 2 thông báo lỗi tương tự được hiển thị lần lượt trong cùng một cửa sổ.

Trong chrome, văn bản được hiển thị sau thông báo tùy chỉnh là: "Bạn có chắc chắn muốn rời khỏi trang này?". Trong firefox, nó hoàn toàn không hiển thị thông báo lỗi tùy chỉnh của chúng tôi (nhưng vẫn hiển thị hộp thoại).

Một thông báo lỗi thích hợp hơn có thể là:

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

Hoặc kiểu stackoverflow: "Bạn đã bắt đầu viết hoặc chỉnh sửa bài đăng."

Nếu bạn đang bắt nút quay lại / chuyển tiếp của trình duyệt và không muốn điều hướng đi, bạn có thể sử dụng:

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

Mặt khác, bạn có thể sử dụng sự kiện tải trước, nhưng thông báo có thể hoặc không hoạt động trên nhiều trình duyệt và yêu cầu trả lại một cái gì đó buộc lời nhắc tích hợp.