Menggunakan Event Onbeforeunload pada JavaScript

Hallo semuanya, pada kali ini kita akan membahas tentang javascript, lebih tepatnya tentang bagaimana cara memperingati user ketika ingin meninggalkan halaman website. Ya, disini kita menggunakan sebuah event yang cukup jarang digunakan namun fungsinya cukup penting. Event ini adalah beforeunload. Untuk lebih jelasnya bisa kalian lihat penjelasan dibawah ini.

Contoh Kode

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

 

Kegunaan

Peringatkan user sebelum mereka meninggalkan halaman. Kedengarannya seperti itu bisa sangat menjengkelkan, tetapi juga tidak dianggap menjengkelkan. Event ini digunakan di website tempat kalian biasa melakukan pekerjaan dan perlu menyimpannya secara berkala. Jika user belum menyimpan pekerjaan mereka dan akan muncul popup tersebut, kalian dapat menggunakan event ini untuk memperingatkan mereka. Dengan catatan, jika mereka menyimpan karya mereka, kalian harus menghapus event ini.

 

Cara Kerja

Jika kalian telah melampirkan event beforeunload ke halaman (dan melakukan hal-hal ekstra seperti yang ditunjukkan dalam situasi yang telah disebutkan di atas), user akan melihat popup yang meminta mereka untuk melakukan konfirmasi apakah mereka ingin "Tinggalkan" atau "Batalkan" ketika mencoba untuk meninggalkan halaman. Saat meninggalkan website mungkin disebabkan user mengklik sebuah link secara tidak sengaja, atau juga bisa merupakan hasil dari mengklik tombol refresh atau kembali pada browser.

MDN memperingatkan bahwa beberapa browser mengharuskan halaman untuk memberikan interaksi daripada tidak ada sama sekali:

    Untuk mengatasi munculan popup yang tidak diinginkan, beberapa browser tidak menampilkan beforeunload event kecuali jika halaman tersebut telah berinteraksi dengan sesuatu yang menjadi triggernya. Selain itu, beberapa browser tidak menampilkannya sama sekali.

 

Alternatif

Tidak perlu terlalu dipikirkan. Jika kalian memperhitungkan tentang user yang kehilangan data sebelum menyimpannya maka kalian cukup gunakan ini pada halaman tertentu saja. Sehingga jika mereka memilih untuk tetap, kalian harus jelaskan tentang apa yang harus mereka lakukan untuk memastikan bahwa mereka saat meninggalkan halaman.

Baiklah teman teman, demikian artikel kali ini yang membahas tentang penggunaan event beforeunload, semoga bermanfaat.

28 Januari 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat