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

Event onunload ทริกเกอร์เมื่อผู้ใช้ ปิดหน้า/แท็บ รีเฟรชหน้า หรือ นำทางไปหน้าอื่น ใช้สำหรับ Cleanup หรือ Analytics สุดท้าย

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

<!DOCTYPE html>
<html>
  <body onunload="newFunc()">
    <p>Close the page and see what happens!</p>
    <p>This event may give unexpected results.</p>
    <script>
      function newFunc() {
        alert("Thank you!");
      }
    </script>
  </body>
</html>

⚠️ ข้อจำกัดสำคัญ (Critical Limitations)

• Browser Block Alert/Confirm: Browser สมัยใหม่ (Chrome, Firefox, Safari, Edge) บล็อก alert(), confirm(), prompt() ใน onunload แล้ว เพื่อป้องกันรบกวนผู้ใช้
• ไม่รองรับ Async: ไม่รอ Promise/Async/Await/Fetch เสร็จ
• Mobile Unreliable: บน Mobile บ่อยครั้งไม่ยิงเลย (App Switch, Tab Close)
• Performance: โค้ดหนักใน onunload ทำให้ปิดหน้าช้า

ตัวเลือกที่ดีกว่า (Modern Alternatives)

แนวทางแนะนำ

// ส่ง Analytics ได้น่าเชื่อถือที่สุด
window.addEventListener('pagehide', (e) => {
  if (e.persisted) return; // ไม่นับถ้าจาก bfcache
  navigator.sendBeacon('/analytics', JSON.stringify({event: 'pagehide'}));
});