กฎความปลอดภัยของ Browser สมัยใหม่ (Chrome, Edge) มีเงื่อนไขอยู่ 2 ข้อ

1. ต้องมีการ “โต้ตอบ” กับหน้าจอก่อน: Browser จะไม่ยอมให้โค้ดนี้ทำงาน ถ้าคุณเปิดหน้าเว็บขึ้นมาแล้วกดปิดทันทีโดยไม่ได้คลิกอะไรเลย คุณต้องลองคลิกที่ไหนก็ได้ในหน้าจอสัก 1 ครั้งก่อน ระบบล็อคถึงจะทำงานครับ
2. ข้อความแจ้งเตือน (Custom Message): Browser สมัยใหม่ ไม่อนุญาต ให้เราแก้ข้อความในหน้าต่างเตือนแล้วครับ (เพื่อป้องกันมิจฉาชีพ) มันจะขึ้นข้อความมาตรฐานของระบบเอง เช่น “Changes you made may not be saved.” (คุณต้องการออกจากไซต์หรือไม่?) ซึ่งเราเปลี่ยนคำไม่ได้ แต่ระบบ “หยุด” การปิดหน้าจอได้แน่นอนครับ

วิธีแก้ไขให้ “เห็นผล” แน่นอน:

ให้คุณปรับโค้ดให้สั้นลงและเป็นมาตรฐานที่ Browser ยอมรับแบบนี้ครับ:

JavaScript

window.addEventListener('beforeunload', (event) => {
    const btn = document.getElementById('backupBtn');
    
    // ตรวจเช็คว่าปุ่ม "ไม่มี" class ที่ชื่อ status-secured ใช่หรือไม่
    // ถ้าไม่มี (คือเป็นสีแดงหรือทอง) ให้เด้งเตือน
    if (btn && !btn.classList.contains('status-secured')) {
        
        // ตามมาตรฐานใหม่ ต้องเขียนแบบนี้เพื่อให้ Browser ยอมรับครับ
        event.preventDefault();
        
        // สำหรับ Chrome/Edge ต้องใส่ค่าว่างหรือข้อความอะไรก็ได้ลงใน returnValue
        event.returnValue = ''; 
        
        return ''; // สำหรับเบราว์เซอร์บางรุ่น
    }
});

🧪 วิธีทดสอบระบบล็อค:

1. Refresh หน้าจอโปรแกรมของคุณ 1 ครั้ง
2. คลิกที่ปุ่มใดก็ได้ หรือคลิกพื้นที่ว่างบนหน้าจอ 1 ครั้ง (เพื่อให้ Browser รู้ว่าเรากำลังใช้งานหน้าจอนี้อยู่)
3. ตรวจสอบว่าปุ่ม Backup เป็น สีแดง หรือ สีทอง
4. ลองกดปุ่ม X เพื่อปิด Tab หรือกด F5 เพื่อรีเฟรชหน้าจอ
5. ผลลัพธ์: จะต้องมีหน้าต่าง Popup เด้งขึ้นมาถามว่า “ต้องการออกจากไซต์หรือไม่?”