Cegah laman web agar tidak menggunakan JavaScript

129

Bagaimana cara mencegah halaman web menavigasi menggunakan JavaScript?

Antusiasme Perangkat Lunak
sumber
Apa yang membuat halaman ini bernavigasi?
Niyaz
9
Menurut pertanyaan, JavaScript membuatnya bernavigasi ...
Shog9
@ Shog9 itu bisa menutup tab membuatnya menavigasi. Jari telunjuk saya melakukan itu ...
Bob Stein

Jawaban:

159

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?";
}
Jimmie R. Houts
sumber
11
Browser akan menampilkan prompt yang sesuai. Cukup gunakanwindow.onbeforeunload = function() { return ""; }
KIM Taegyoon
Tapi itu tidak cukup. Bagaimana dengan kontrol di dalam formulir? Mereka juga memicu ini.
Fandango68
1
Browser modern tidak memungkinkan Anda untuk menampilkan pesan khusus pada prompt, karena ini disalahgunakan oleh phisher dan sejenisnya.
Flimm
Terima kasih @Flimm, saya telah memperbarui jawabannya sehingga sekarang akurat untuk peramban saat ini.
Jimmie R. Houts
@ FlimmI ingin memperbarui status online pengguna ketika pengguna online menutup tab browser atau browser. Saya menggunakan kode dalam solusi tetapi tidak berfungsi. Apakah ada solusi untuk ini?
Nasimba
23

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.

anarkis
sumber
bagaimana menunjukkan modal jika pengguna ingin menutup browser (klik tutup)? benarkah?
15

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:

masukkan deskripsi gambar di sini

Bahaya
sumber
3
Di IE jika kotor salah, string 'null' akan ditampilkan. Hanya membungkusnya di dalam pernyataan if. Lihat: stackoverflow.com/questions/11793996/…
Jacob van Lingen
Setuju @ JacobvanLingen, ini akan menjadi jawaban terbaik di sini dan pada tiga pertanyaan lain jika berakhir bukan nol. (1) itu bersyarat (2) itu menyebutkan "kotor" alasan sah paling umum untuk menghalangi navigasi dan (3) ia memiliki tangkapan layar. undefined
Bob Stein
Apakah ini akan bekerja pada semua browser jika diakhiri dengan undefined daripada null?
Bahaya
9

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

Paul Weber
sumber
1
Ingatlah untuk menggunakan event.returnValue
huruf besar
7

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

window.onunload = function () {
  alert('You are trying to leave.');
  return false;
}
Gabor
sumber
2
Kecuali jika browser adalah Opera, yang melewatkan acara onunload jika tab / jendela / program sedang ditutup.
Powerlord
5

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.

BoffinBrain
sumber
3

Gunakan onunload .

Untuk jQuery, saya pikir ini berfungsi seperti ini:

$(window).unload(function() { 
  alert("Unloading"); 
  return falseIfYouWantToButBeCareful();
});
cgp
sumber
Mengembalikan false tidak akan membatalkan pembongkaran sayangnya - unloadperistiwa ini terjadi ketika pengguna meninggalkan halaman, tidak seperti beforeunloadyang terjadi sebelumnya (dan mungkin dibatalkan)
Jimbo
@altCognito: Anda memberi saya ide bagus dengan falseIfYouWantToButBeCareful () Sekarang saya dapat menghindari pop-up default yang diberikan oleh IE atau FF. Tetapi untuk chrome tidak berfungsi. Melihat ke dalamnya.
pengguna367134
3

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."

Curtis Yallop
sumber
2

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.

sedikit kurang
sumber