เหตุการณ์ onpagehide: รันสคริปตเมื่อผู้ใช้นำทางออกจากหน้า

เหตุการณ์ onpagehide จะถูกกระตุ้นเมื่อผู้ใช้นำทางออกจากหน้าเว็บ กรณีที่พบได้ ได้แก่:

• คลิกลิงก์ไปหน้าอื่น
• ปิดแท็บ/หน้าต่างเบราว์เซอร์
• ส่งฟอร์ม (Form Submit)
• กดปุ่ม Back/Forward
• Reload หน้า

รูปแบบการใช้งาน

<!-- ใน HTML Attribute -->
<body onpagehide="myScript()">

<!-- ใน JavaScript Property -->
object.onpagehide = function() { script; };

<!-- แบบ Event Listener (แนะนำ) -->
window.addEventListener('pagehide', function(event) {
    // event.persisted = true หากหน้าอาจถูกเก็บใน bfcache
});

ความแตกต่าง onunload vs onpagehide vs beforeunload

bfcache (Back/Forward Cache)

เบราว์เซอร์สมัยใหม่เก็บหน้าเว็บไว้ในหน่วยความจำเมื่อกด Back/Forward เพื่อโหลดเร็วขึ้น (pagehide จะยิงด้วย event.persisted = true, unload ไม่ยิง)

แนวทางปฏิบัติที่ดี

window.addEventListener('pagehide', (e) => {
    // ทำความสะอาด: ยกเลิก timers, ปิด WebSocket, บันทึกสถานะ
    cleanup();
    
    // ส่ง Analytics (ทำงานได้แม้ใน bfcache)
    if (!e.persisted) {
        navigator.sendBeacon('/analytics', 'page_unload');
    }
});