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

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

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

การใช้งาน onunload ใน HTML5

เราสามารถกำหนด onunload Event Attribute ได้ทั้งในรูปแบบ inline (เช่นการกำหนดในแท็ก HTML โดยตรง) หรือใน JavaScript

การใช้งานแบบ Inline ใน HTML

ในตัวอย่างนี้เราจะเขียนฟังก์ชัน onunload ลงในแท็ก HTML โดยตรง

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Unload Event Example</title>
  <script>
    function showUnloadMessage() {
      alert("คุณกำลังจะออกจากหน้านี้");
    }
  </script>
</head>
<body onunload="showUnloadMessage()">
  <h1>ตัวอย่างการใช้งาน onunload Event</h1>
  <p>ลองปิดหน้าต่างหรือเปลี่ยนหน้าเว็บเพื่อดูการทำงานของ onunload</p>
</body>
</html>

ในตัวอย่างนี้ เมื่อผู้ใช้ทำการปิดหน้าต่างหรือออกจากหน้าเว็บ ฟังก์ชัน showUnloadMessage() จะถูกเรียกใช้เพื่อแสดงข้อความแจ้งเตือนผ่าน alert() บอกผู้ใช้ว่า “คุณกำลังจะออกจากหน้านี้”

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

เราสามารถใช้ JavaScript เพื่อกำหนดการทำงานให้กับเหตุการณ์ onunload ได้เช่นกัน

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Unload Event Example</title>
  <script>
    window.onunload = function() {
      console.log("หน้านี้ถูกออกจากแล้ว");
    };
  </script>
</head>
<body>
  <h1>ตัวอย่างการใช้งาน onunload Event</h1>
  <p>ลองปิดหน้าต่างหรือเปลี่ยนหน้าเว็บเพื่อดูการทำงานของ onunload</p>
</body>
</html>

ในตัวอย่างนี้ เรากำหนด onunload ผ่าน window.onunload ซึ่งจะทำให้มีข้อความถูกบันทึกลงในคอนโซลว่า “หน้านี้ถูกออกจากแล้ว” เมื่อผู้ใช้ปิดหน้าต่างหรือเปลี่ยนหน้า

การใช้งาน onunload กับการเก็บข้อมูล

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

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Unload Event Example</title>
  <script>
    let startTime;

    window.onload = function() {
      startTime = new Date().getTime();
    };

    window.onunload = function() {
      let endTime = new Date().getTime();
      let timeSpent = endTime - startTime;
      // บันทึกเวลาที่ใช้ในหน้านี้ไปยังระบบหรือทำการส่งไปยัง server
      console.log("คุณใช้เวลาในหน้านี้: " + timeSpent + " มิลลิวินาที");
    };
  </script>
</head>
<body>
  <h1>ตัวอย่างการใช้งาน onunload Event</h1>
  <p>ลองปิดหน้าต่างหรือเปลี่ยนหน้าเว็บเพื่อดูเวลาที่ใช้ในหน้านี้</p>
</body>
</html>

ในตัวอย่างนี้ เราจะทำการคำนวณเวลาที่ผู้ใช้ใช้บนหน้าเว็บ โดยใช้ฟังก์ชัน onload เพื่อเริ่มจับเวลาเมื่อหน้าโหลด และ onunload เพื่อนับเวลาที่ใช้เมื่อผู้ใช้กำลังจะออกจากหน้าเว็บ

ข้อควรระวังในการใช้ onunload

  • การใช้งาน alert(), confirm() หรือ prompt() ใน onunload อาจทำให้เกิดการหยุดการทำงานหรือทำให้ประสบการณ์การใช้งานเว็บไม่ราบรื่นในบางเบราว์เซอร์
  • ไม่แนะนำให้ใช้ onunload สำหรับงานที่ต้องการความเชื่อถือได้ เช่น การเก็บข้อมูลสำคัญ เพราะเหตุการณ์นี้อาจไม่ได้ถูกเรียกใช้ในทุกสถานการณ์ (เช่น การปิดเบราว์เซอร์อย่างกะทันหัน)

onunload เป็นเครื่องมือที่มีประโยชน์สำหรับการจัดการสถานะหรือการตอบสนองต่อการออกจากหน้าเว็บ แต่ควรใช้ด้วยความระมัดระวังเพื่อไม่ให้รบกวนประสบการณ์ผู้ใช้

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

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