พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน onpagehide Event Attribute

onpagehide เป็น Event Attribute ใน HTML5 ที่ทำงานเมื่อหน้าถูกซ่อนหรือกำลังจะปิดลง (เช่นเมื่อผู้ใช้ไปที่หน้าใหม่ หรือเปิดแท็บใหม่) โดย Event นี้จะถูกเรียกก่อนที่หน้าเว็บจะถูกซ่อน ทำให้เราสามารถจัดการข้อมูลก่อนที่จะออกจากหน้าหรือทำบางอย่าง เช่น การบันทึกข้อมูล หรือการแจ้งเตือนผู้ใช้ว่าเขากำลังจะออกจากหน้านั้นๆ

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

1. การใช้งานใน HTML

HTML
<body onpagehide="alert('กำลังจะออกจากหน้านี้!')">
    <h1>หน้าทดสอบ</h1>
</body>

ในตัวอย่างนี้ เมื่อหน้าถูกซ่อน จะมีการแสดงข้อความแจ้งเตือนผู้ใช้ว่า “กำลังจะออกจากหน้านี้!”

2. การใช้งานใน JavaScript โดยตรง

HTML
<body>
    <h1>หน้าทดสอบ</h1>
    <script>
        window.onpagehide = function(event) {
            console.log('หน้าถูกซ่อนหรือกำลังจะถูกปิด');
        };
    </script>
</body>

ในตัวอย่างนี้เมื่อหน้าถูกซ่อน ข้อความ “หน้าถูกซ่อนหรือกำลังจะถูกปิด” จะถูกแสดงใน Console ของเบราว์เซอร์

3. การใช้งานร่วมกับฟังก์ชันการจัดการ Event

HTML
<body>
    <h1>หน้าทดสอบ</h1>
    <script>
        window.addEventListener('pagehide', function(event) {
            console.log('หน้าถูกซ่อน');
        });
    </script>
</body>

ในกรณีนี้ใช้ addEventListener เพื่อฟัง Event pagehide ซึ่งจะช่วยให้การจัดการ Event ถูกแยกออกจาก HTML ทำให้โค้ดสะอาดและดูแลรักษาได้ง่าย

ประยุกต์ใช้งาน onpagehide

บันทึกสถานะก่อนปิดหน้า หากต้องการบันทึกข้อมูลบางอย่างเมื่อผู้ใช้กำลังจะปิดหน้า เช่น สถานะของฟอร์ม หรือความคืบหน้าในการทำงาน

HTML
<body>
    <h1>แบบทดสอบ</h1>
    <form id="quizForm">
        <input type="text" id="answer" placeholder="คำตอบของคุณ">
    </form>
    <script>
        window.onpagehide = function(event) {
            let answer = document.getElementById('answer').value;
            localStorage.setItem('quizAnswer', answer);
            console.log('บันทึกคำตอบก่อนออกจากหน้า');
        };
    </script>
</body>

ในตัวอย่างนี้ คำตอบที่ผู้ใช้กรอกในฟอร์มจะถูกบันทึกลงใน localStorage เมื่อหน้าถูกปิด

ลดการใช้งานทรัพยากรเมื่อผู้ใช้ไม่ได้อยู่บนหน้า หากมีการใช้งานทรัพยากรหนักๆ เช่น การอัพเดตข้อมูลแบบเรียลไทม์ เมื่อผู้ใช้ซ่อนหน้าเว็บ ควรหยุดการอัพเดตนั้นเพื่อประหยัดทรัพยากร

HTML
<body>
    <h1>หน้าการอัพเดตข้อมูล</h1>
    <script>
        let intervalId = setInterval(() => {
            console.log('กำลังอัพเดตข้อมูล...');
        }, 1000);

        window.onpagehide = function(event) {
            clearInterval(intervalId);
            console.log('หยุดอัพเดตข้อมูลเนื่องจากหน้าถูกซ่อน');
        };
    </script>
</body>

ในตัวอย่างนี้ เมื่อผู้ใช้ซ่อนหน้า การอัพเดตข้อมูลจะถูกหยุดทันที

แสดงข้อความเมื่อผู้ใช้กลับมาเปิดหน้าอีกครั้ง สามารถใช้ร่วมกับ Event onpageshow เพื่อแสดงข้อความเมื่อผู้ใช้กลับมาเปิดหน้าอีกครั้งหลังจากที่ซ่อนหน้าไป

HTML
<body>
    <h1>หน้าทดสอบ</h1>
    <script>
        window.onpagehide = function(event) {
            console.log('หน้าถูกซ่อน');
        };

        window.onpageshow = function(event) {
            console.log('ยินดีต้อนรับกลับมา!');
        };
    </script>
</body>

ในตัวอย่างนี้ เมื่อผู้ใช้กลับมาที่หน้าอีกครั้งจะมีการแสดงข้อความ “ยินดีต้อนรับกลับมา!”

สรุป

onpagehide เป็น Event ที่มีประโยชน์ในการจัดการสถานการณ์เมื่อหน้าถูกซ่อนหรือปิด เช่น การบันทึกสถานะของผู้ใช้ การหยุดใช้ทรัพยากรที่ไม่จำเป็น หรือแสดงการแจ้งเตือน Event นี้สามารถนำไปประยุกต์ใช้งานได้หลากหลายเพื่อปรับปรุงประสบการณ์ผู้ใช้บนเว็บไซต์.

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ