การใช้งาน Event onbeforeunload ใน JavaScript

Event onbeforeunload ทริกเกอร์ ก่อนที่หน้าจะ Unload ใช้แสดง Dialog ยืนยันให้ผู้ใช้ (เช่น "คุณมีการเปลี่ยนแปลงที่ยังไม่ได้บันทึก ต้องการออกหรือไม่?")

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
  <body onbeforeunload="return myFunction()">
    <a href="https://www.qries.com">Click to open Qries</a>
    <script>
      function myFunction() {
        return "Working with onbeforeunload event";
      }
    </script>
  </body>
</html>

⚠️ ข้อจำกัดสำคัญ (Modern Browser Behavior)

• Custom Message Ignored: Browser ทุกตัว ไม่แสดง Custom String แล้ว (Security/Ux) จะแสดงข้อความมาตรฐานของ Browser เอง
• ต้อง Return String: Legacy Behavior ต้อง return "message" หรือ event.returnValue = "message"
• บล็อก bfcache: มี Listener นี้ → หน้าไม่เข้า Back-Forward Cache
• User Interaction Required: บาง Browser ต้องมี Interaction ก่อน (Type, Click) จึงจะแสดง Dialog

รูปแบบมาตรฐานสมัยใหม่

window.addEventListener('beforeunload', (e) => {
  // ยกเลิก Default (Browser จะแสดง Dialog เอง)
  e.preventDefault();
  // Chrome ต้องการ returnValue
  e.returnValue = '';
  // Return String สำหรับ Legacy (ไม่มีผลใน Browser ใหม่)
  return '';
});

เมื่อไหร่ควรใช้?

• Form มี Unsaved Changes
• Editor/Builder ที่ข้อมูลหายได้
• อย่าใช้ สำหรับ Analytics/Cleanup (ใช้ pagehide + sendBeacon)

คำเตือน: ใช้ให้น้อยที่สุด เพราะทำให้ UX แย่และบล็อก bfcache (ทำให้ Back/Forward ช้าลง)