JavaScript sebelum meninggalkan halaman

234

Saya ingin membuat konfirmasi sebelum pengguna meninggalkan halaman. Jika dia bilang ok maka itu akan mengarahkan ke halaman baru atau membatalkan untuk pergi. Saya mencoba membuatnya dengan onunload

<script type="text/javascript">
function con() {
    var answer = confirm("do you want to check our other products")
    if (answer){

        alert("bye");
    }
    else{
        window.location = "http://www.example.com";
    }
}
</script>
</head>

<body onunload="con();">
<h1 style="text-align:center">main page</h1>
</body>
</html>

Tapi itu mengkonfirmasi setelah halaman sudah ditutup? Bagaimana cara melakukannya dengan benar?

Akan lebih baik jika seseorang menunjukkan cara melakukannya dengan jQuery?

javascript jquery kd7
sumber
1
ha ha ha ... Ya, itu benar..tapi untungnya itu bukan situs saya ... klien saya meminta untuk melakukannya di sisinya
kd7
25
Ya, tapi saya sangat senang melihat peringatan itu ketika saya akan keluar dari halaman Gmail yang belum disimpan.
Etdashou
Catatan, di Firefox 4+ hanya pesan default yang ditampilkan dan bukan pesan khusus Anda developer.mozilla.org/en-US/docs/Web/Events/beforeunload#Catatan
baptx
4
Kemungkinan duplikat pengguna Peringatkan sebelum meninggalkan halaman web dengan perubahan yang belum disimpan
Wasim A.

Jawaban:

352

onunload(atau onbeforeunload) tidak dapat mengalihkan pengguna ke halaman lain. Ini untuk alasan keamanan.

Jika Anda ingin menampilkan prompt sebelum pengguna meninggalkan halaman, gunakan onbeforeunload:

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

Atau dengan jQuery:

$(window).bind('beforeunload', function(){
  return 'Are you sure you want to leave?';
});

Ini hanya akan bertanya kepada pengguna apakah mereka ingin meninggalkan halaman atau tidak, Anda tidak dapat mengarahkan mereka jika mereka memilih untuk tetap berada di halaman. Jika mereka memilih untuk pergi, browser akan pergi ke tempat yang mereka perintahkan.

Anda dapat menggunakan onunloaduntuk melakukan hal-hal sebelum halaman diturunkan, tetapi Anda tidak dapat mengalihkan dari sana (Chrome 14+ blok lansiran di dalam onunload):

window.onunload = function() {
    alert('Bye.');
}

Atau dengan jQuery:

$(window).unload(function(){
  alert('Bye.');
});
Roket Hazmat
sumber
12
@ Joseph: Ketika Anda mengembalikan string dari onbeforeunload, browser menempatkan string itu ke dalam kotak konfirmasi sendiri. Penggunaan confirmtidak berguna di onunloaddan onbeforeunload, karena hanya browser yang dapat mengontrol ke mana perginya, bukan Anda. Lihat demo ini: jsfiddle.net/3kvAC
Rocket Hazmat
7
Hanya sebuah catatan, jika Anda ingin menampilkan pesan secara kondisional onbeforeunload, return falseakan membuat browser menampilkan "false" dalam dialog. Anda perlu return undefinedjika Anda ingin membiarkan jendela ditutup tanpa ada peringatan pengguna.
Dan Fitch
5
@Adam: Firefox memutuskan untuk melarang kustomisasi pesan itu. Itu bagian dari browser, jadi Anda tidak bisa mengesampingkan perilaku itu. Peramban lain mungkin juga menghapus kemampuan untuk menyesuaikan pesan. Lihat: developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/…
Rocket Hazmat
8
@RocketHazmat Chrome juga memilikinya. Sekarang hanya tertulis: Apakah Anda ingin meninggalkan situs ini? Perubahan yang Anda buat mungkin tidak disimpan.
programmer5000
6
@ programmer5000 Bagus karena beberapa situs web jahat dapat menampilkan beberapa peringatan yang tidak berguna (misalnya, "Anda tidak bisa pergi tanpa memberikan informasi bank Anda")
Naman
34

Kode ini saat Anda juga mendeteksi status formulir berubah atau tidak.

$('#form').data('serialize',$('#form').serialize()); // On load save form current state

$(window).bind('beforeunload', function(e){
    if($('#form').serialize()!=$('#form').data('serialize'))return true;
    else e=null; // i.e; if form state change show warning box, else don't show it.
});

Anda dapat menjalankan fungsi Google JQuery Form Serialize, ini akan mengumpulkan semua input formulir dan menyimpannya dalam array. Saya kira penjelasan ini sudah cukup :)

Wasim A.
sumber
tahu mengapa ini tidak berhasil? Mungkinkah itu ditimpa oleh fungsi js / plugin jquery lainnya? Saya menjalankan aplikasi webrtc dan saya ingin "menutup" beberapa hal ketika klien menutup jendela sehingga kebutuhan untuk menangani jendela ditutup.
hei
1
ini dapat ditimpa oleh plugin lain dll, kebanyakan pengembang membuat kesalahan dengan pemilih, jika Anda ragu tentang ditimpa, taruh kode jquery Anda sebelum menutup tag </body>.
Wasim A.
Ya ... jika Anda memiliki beberapa kode JS yang menyembunyikan atau menonaktifkan bidang input setelah halaman dimuat, maka ketika Anda melakukan pemeriksaan untuk membandingkan bidang tersembunyi \ dinonaktifkan tidak akan diserialisasi. Pemeriksaan akan gagal tentu saja. ;) Ada solusi ini: stackoverflow.com/a/4748748/114029
Leniel Maccaferri
Omong-omong ... ada cara yang lebih baik di sini: stackoverflow.com/q/16322042/114029
Leniel Maccaferri
1
Perlu dicatat bahwa ini juga akan menimbulkan peringatan saat menekan tombol kirim. orang dapat membuat serial bentuk lagi pada klik tombol kirim untuk mencegahnya.
Adam
19

Ini akan mengingatkan saat meninggalkan halaman saat ini

<script type='text/javascript'>
function goodbye(e) {
    if(!e) e = window.event;
    //e.cancelBubble is supported by IE - this will kill the bubbling process.
    e.cancelBubble = true;
    e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog

    //e.stopPropagation works in Firefox.
    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}
window.onbeforeunload=goodbye; 

</script>
Ajit Singh
sumber
14

Ini yang saya lakukan untuk menampilkan pesan konfirmasi tepat ketika saya belum menyimpan data

window.onbeforeunload = function () {
            if (isDirty) {
                return "There are unsaved data.";
            }
            return undefined;
        }

mengembalikan "tidak terdefinisi" akan menonaktifkan konfirmasi

Catatan: mengembalikan "null" tidak akan berfungsi dengan IE

Anda juga dapat menggunakan "tidak terdefinisi" untuk menonaktifkan konfirmasi

window.onbeforeunload = undefined;
Mina Matta
sumber
11

Agar popop dengan Chrome 14+, Anda perlu melakukan hal berikut:

jQuery(window).bind('beforeunload', function(){
    return 'my text';
});

Pengguna akan ditanya apakah ia ingin tinggal atau pergi.

David Bélanger
sumber
Adakah yang tahu mengapa ini tidak berhasil? Saya menggunakan chrome (versi terbaru) bersama dengan sejumlah plugin jquery tapi saya tidak mendapatkan peringatan ketika saya menutup jendela.
hei
@hey Kenapa suara turun? Ini berfungsi .... Anda harus memastikan itu di luar jQuery(document)dan saya sarankan untuk meletakkannya tepat setelah semua plugin Anda dimuat. Juga, cuplikan ini tidak memberikan peringatan ... ini hanya demo return.
David Bélanger
7

Anda dapat menggunakan satu-liner berikut untuk selalu bertanya kepada pengguna sebelum meninggalkan halaman.

window.onbeforeunload = s => "";

Untuk menanyakan kepada pengguna ketika sesuatu di halaman telah dimodifikasi, lihat jawaban ini .

spencer.sm
sumber
apakah ini juga aktif jika saya me-refresh halaman atau hanya keluar?
Si8
Ya, itu akan menyala saat refresh atau keluar.
spencer.sm
Apakah ada cara untuk mengetahui kapan refresh vs kapan pertama kali?
Si8
Ketika pengguna datang ke halaman pertama kali sebagai lawan dari pengguna menyegarkan halaman.
Si8
Oh tidak. Itu tidak akan dipecat ketika pengguna datang ke halaman untuk pertama kalinya. Hanya saat menutup atau mengganti halaman atau menyegarkan.
spencer.sm
4

Biasanya Anda ingin menampilkan pesan ini, ketika pengguna telah membuat perubahan dalam formulir, tetapi mereka tidak disimpan.

Ambil pendekatan ini untuk menampilkan pesan, hanya ketika pengguna telah mengubah sesuatu

var form = $('#your-form'),
  original = form.serialize()

form.submit(function(){
  window.onbeforeunload = null
})

window.onbeforeunload = function(){
  if (form.serialize() != original)
    return 'Are you sure you want to leave?'
}
Simon Franzen
sumber
3 
<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">

<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>

<a href="https://www.w3schools.com">Click here to go to w3schools.com</a>

<script>
function myFunction() {
    return "Write something clever here...";
}
</script>

</body>
</html>

https://www.w3schools.com/tags/ev_onbeforeunload.asp

Emir Mamashov
sumber
2

Sebagian besar solusi di sini tidak bekerja untuk saya, jadi saya menggunakan yang ditemukan di sini

Saya juga menambahkan variabel untuk mengizinkan kotak konfirmasi atau tidak

window.hideWarning = false;
window.addEventListener('beforeunload', (event) => {
    if (!hideWarning) {
        event.preventDefault();
        event.returnValue = '';
    }

});
Raj Sharma
sumber
1

Hanya sedikit lebih bermanfaat, aktifkan dan nonaktifkan

$(window).on('beforeunload.myPluginName', false); // or use function() instead of false
$(window).off('beforeunload.myPluginName');
l2aelba
sumber