เหตุการณ์ onunload: รันสคริปตเมื่อหน้าเว็บถูกปลดโหลด

เหตุการณ์ onunload จะถูกกระตุ้นเมื่อหน้าเว็บกำลังจะถูกปลดโหลด (unload) จากหน้าต่าง/แท็บ เกิดขึ้นเมื่อ:

ผู้ใช้ปิดแท็บ/หน้าต่าง
นำทางไปหน้าอื่น
รีโหลดหน้า
เรียก window.close()

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body onunload="display()">
    <h2>Tutorialspoint</h2>
    <h3>การเรียนรู้อย่างง่ายดาย</h3>
    <script>
        function display() {
            alert("ลาก่อน!");
        }
    </script>
</body>
</html>

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

เบราว์เซอร์สมัยใหม่จำกัดการทำงานใน onunload มาก:

❌ alert(), confirm(), prompt() - ถูกบล็อก
❌ การ Redirect (location.href = ...) - ถูกบล็อก
❌ การทำงาน Async (AJAX, Fetch) - อาจไม่เสร็จทัน
✅ navigator.sendBeacon() - ทำงานได้ (สำหรับส่ง Analytics)
✅ การทำงาน Synchronous แบบรวดเร็ว (localStorage, sessionStorage)

แนวทางที่แนะนำ: ใช้ beforeunload หรือ pagehide

<!-- beforeunload: สำหรับยืนยันก่อนออก (แสดง dialog มาตรฐาน) -->
window.addEventListener('beforeunload', (e) => {
    e.preventDefault();
    e.returnValue = ''; // บราวเซอร์จะแสดง dialog เอง
});

<!-- pagehide: ทำงานเมื่อหน้าถูกซ่อน (รวมถึง bfcache) -->
window.addEventListener('pagehide', (e) => {
    if (e.persisted) {
        console.log('หน้าอาจถูกเก็บใน bfcache');
    }
    navigator.sendBeacon('/analytics', JSON.stringify({event: 'pagehide'}));
});

สรุป: หลีกเลี่ยง onunload ใช้ beforeunload (ยืนยัน) หรือ pagehide (ทำความสะอาด/ส่งข้อมูล) แทน