Saat melakukan pengembangan web, kita sering menggunakan event penutupan halaman sebelum dibongkar, yang dapat memberikan kesempatan kepada pengguna untuk memilih berhenti menutup, seperti editor blog ini. Jika pengguna memilih untuk keluar, peristiwa onunload secara alami akan terpicu; tetapi jika pengguna memilih untuk membatalkan, bagaimana cara mendeteksinya?
Kami berasumsi bahwa halaman meninggalkan acara pembatalan yang disebut onunloadcancel. Tentu saja, acara ini akan diaktifkan setelah pengguna menekan tombol Batal pada dialog. Namun proses pemicuan untuk menutup kotak dialog prompt tidaklah sesederhana itu. Mari kita tinjau prosesnya terlebih dahulu:
Copy kode kodenya sebagai berikut:
window.onbeforeunload = fungsi()
{
return "Benarkah akan pergi?";
}
Ketika pengguna siap untuk meninggalkan halaman (seperti menekan tombol tutup, atau menyegarkan halaman, dll.), peristiwa onbeforeunload dipicu. Skrip kami tidak dapat memutuskan apakah akan mencegah penutupan halaman dalam kejadian ini. Satu-satunya hal yang dapat dilakukan adalah mengembalikan string. String ini hanya muncul sebagai teks penjelasan di kotak dialog pilihan tutup . Tapi yang mana yang harus kita pilih, kita tidak tahu.
Namun, jika kita menganalisis masalah ini dengan cermat, sebenarnya tidak demikian. Jika pengguna benar-benar memilih untuk menutup halaman, maka semua kode yang berjalan akan hilang; dan jika pengguna tetap berada di halaman, maka akan dianggap seolah-olah tidak terjadi apa-apa, kecuali peristiwa onbeforeunload. Oleh karena itu, kami melakukan sedikit trik pada event onbeforeunload dan mendaftarkan timer di sini yang akan dimulai setelah beberapa milidetik. Jika halaman tersebut benar-benar ditutup, maka tentu saja timer tersebut tidak valid maka halaman tersebut masih ada, dan penundaan dari beberapa milidetik akan Tidak ada kesalahan dalam peristiwa interaksi antarmuka asinkron yang inheren ini.
Copy kode kodenya sebagai berikut:
<bahasa skrip="JavaScript">
window.onbeforeunload = fungsi()
{
setTimeout(onunloadcancel, 10);
return "Benarkah akan pergi?";
}
jendela.onunloadcancel = fungsi()
{
alert("batal berangkat");
}
</skrip>
Kami menggunakan setTimeout dan menunda 10 ms untuk mengeksekusi onunloadcancel. Jika halaman tersebut benar-benar ditutup, pengatur waktunya tentu saja akan dimusnahkan; jika tidak, lanjutkan. Namun selama pengujian, ditemukan bahwa FireFox memiliki dua bug:
Terkadang ketika tombol close ditekan, onunloadcancel juga akan dijalankan, dan kotak dialog akan berkedip. Jika Anda mengubah ke while(1); browser akan tetap macet, yang berarti onunloadcancel memang dijalankan, tetapi hanya merusak antarmuka, tetapi tidak menghentikan sementara jalannya skrip.
Jika Anda keluar dengan menyegarkan halaman, onbeforeunload hanya akan dijalankan satu kali, tetapi jika Anda mengklik tombol X untuk menutup halaman, onbeforeunload akan dijalankan dua kali. Oleh karena itu, kami masih perlu memperbaikinya agar kompatibel dengan FF.
Copy kode kodenya sebagai berikut:
<bahasa skrip="JavaScript">
var_t;
window.onbeforeunload = fungsi()
{
setTimeout(fungsi(){_t = setTimeout(onunloadcancel, 0)}, 0);
return "Benarkah akan pergi?";
}
jendela.onunloadcancel = fungsi()
{
batas waktu habis(_t);
alert("batal berangkat");
}
</skrip>
Sebuah metode digunakan di sini yang saya tidak dapat menjelaskan alasannya. Ini harus dianggap sebagai peretasan untuk mengatasi bug di FF.