Cegah laman web agar tidak menggunakan JavaScript

Bagaimana cara mencegah halaman web menavigasi menggunakan JavaScript?

Menggunakan onunloadmemungkinkan Anda untuk menampilkan pesan, tetapi tidak akan mengganggu navigasi (karena sudah terlambat). Namun, menggunakan onbeforeunloadakan mengganggu navigasi:

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

Catatan: String kosong dikembalikan karena browser yang lebih baru memberikan pesan seperti "Perubahan yang tidak disimpan akan hilang" yang tidak dapat diganti.

Di browser yang lebih lama Anda bisa menentukan pesan yang akan ditampilkan di prompt:

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

Tidak seperti metode lain yang disajikan di sini, sedikit kode ini tidak akan menyebabkan browser menampilkan peringatan yang menanyakan kepada pengguna apakah ia ingin pergi; sebaliknya, ia mengeksploitasi sifat DOM yang terjadi untuk mengarahkan kembali ke halaman saat ini (dan dengan demikian membatalkan navigasi) sebelum browser memiliki kesempatan untuk menurunkannya dari memori.

Karena ia bekerja dengan navigasi hubungan arus pendek secara langsung, itu tidak dapat digunakan untuk mencegah halaman ditutup; namun, ini dapat digunakan untuk menonaktifkan frame-busting.

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

Penafian: Anda seharusnya tidak pernah melakukan ini. Jika suatu halaman memiliki kode penghilang bingkai, harap hormati keinginan penulis.

Saya berakhir dengan versi yang sedikit berbeda ini:

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

Di tempat lain saya mengatur flag kotor ke true ketika formulir menjadi kotor (atau saya ingin mencegah navigasi pergi). Ini memungkinkan saya untuk dengan mudah mengontrol apakah pengguna mendapat konfirmasi Konfirmasi Navigasi atau tidak.

Dengan teks di jawaban yang dipilih Anda melihat permintaan berlebihan:

Setara dengan cara yang lebih modern dan kompatibel dengan browser, menggunakan API addEventListener modern.

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

Sumber: https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload

Dalam contoh Ayman dengan mengembalikan false Anda mencegah jendela / tab browser tertutup.

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

Setara dengan jawaban yang diterima di jQuery 1.11:

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

Contoh JSFiddle

Jawaban altCognito menggunakan unloadacara tersebut, yang terlambat bagi JavaScript untuk membatalkan navigasi.

Gunakan onunload .

Untuk jQuery, saya pikir ini berfungsi seperti ini:

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

Pesan kesalahan yang disarankan dapat menduplikasi pesan kesalahan yang sudah ditampilkan browser. Di chrome, 2 pesan kesalahan serupa ditampilkan satu demi satu di jendela yang sama.

Di chrome, teks yang ditampilkan setelah pesan khusus adalah: "Apakah Anda yakin ingin meninggalkan halaman ini?". Di firefox, sama sekali tidak menampilkan pesan kesalahan khusus kami (tetapi masih menampilkan dialog).

Pesan kesalahan yang lebih tepat mungkin:

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

Atau gaya stackoverflow: "Anda sudah mulai menulis atau mengedit posting."

Jika Anda menangkap tombol maju / mundur browser dan tidak ingin bernavigasi, Anda dapat menggunakan:

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

Jika tidak, Anda dapat menggunakan acara sebelumunload , tetapi pesannya mungkin atau mungkin tidak bekerja lintas browser, dan membutuhkan kembali sesuatu yang memaksa prompt built-in.