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

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

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

วิธีการใช้งาน onbeforeunload

เราสามารถกำหนด onbeforeunload ผ่าน 2 วิธีหลัก คือ

  1. ผ่าน HTML Attribute: กำหนด onbeforeunload เป็น Attribute บน <body> หรือ tag อื่น ๆ
  2. ผ่าน JavaScript: กำหนด onbeforeunload ใน JavaScript โดยใช้ window.onbeforeunload หรือ addEventListener

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

การใช้งานใน HTML Attribute

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example</title>
</head>
<body onbeforeunload="return 'Are you sure you want to leave?';">
  <h1>onbeforeunload Example</h1>
  <p>If you try to leave this page, you'll get a warning.</p>
</body>
</html>

ในตัวอย่างนี้ ถ้าผู้ใช้พยายามปิดแท็บหรือเปลี่ยนหน้า เบราว์เซอร์จะแสดงคำเตือนว่า “Are you sure you want to leave?” ซึ่งเป็นข้อความที่ถูกกำหนดไว้

การใช้งานใน JavaScript ผ่าน window.onbeforeunload

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example</title>
</head>
<body>
  <h1>onbeforeunload Example</h1>
  <p>If you try to leave this page, you'll get a warning.</p>

  <script>
    window.onbeforeunload = function() {
      return "You have unsaved changes. Do you really want to leave?";
    };
  </script>
</body>
</html>

ในตัวอย่างนี้ เมื่อผู้ใช้พยายามออกจากหน้า เบราว์เซอร์จะแสดงข้อความเตือนที่ระบุว่า “You have unsaved changes. Do you really want to leave?”

การใช้งานผ่าน addEventListener

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example</title>
</head>
<body>
  <h1>onbeforeunload Example with addEventListener</h1>
  <p>If you try to leave this page, you'll get a warning.</p>

  <script>
    window.addEventListener('beforeunload', function (event) {
      event.preventDefault();
      event.returnValue = "You have unsaved changes. Do you really want to leave?";
    });
  </script>
</body>
</html>

ในกรณีนี้ ใช้ addEventListener เพื่อเพิ่มฟังก์ชัน beforeunload เมื่อพยายามออกจากหน้า เบราว์เซอร์จะเรียกใช้ฟังก์ชันนี้และแสดงข้อความเตือน

รูปแบบการประยุกต์ใช้งาน onbeforeunload

ป้องกันข้อมูลสูญหาย: กรณีที่ผู้ใช้งานกรอกฟอร์ม แต่ยังไม่ได้บันทึกข้อมูล เราสามารถใช้ onbeforeunload เพื่อเตือนว่าข้อมูลจะสูญหายหากออกจากหน้า

JavaScript
window.onbeforeunload = function() {
  if (document.getElementById('form').dirty) {
    return 'You have unsaved changes.';
  }
};

การเตือนก่อนออกจากกระบวนการทำงานสำคัญ: เช่น การออกจากกระบวนการสั่งซื้อออนไลน์ที่ยังไม่เสร็จสมบูรณ์ เพื่อป้องกันไม่ให้ผู้ใช้ลืมทำธุรกรรมให้เสร็จ

JavaScript
window.onbeforeunload = function() {
  return "Are you sure you want to leave? Your order is not complete.";
};

การติดตามเหตุการณ์พฤติกรรมของผู้ใช้: เช่น การเก็บข้อมูลว่าผู้ใช้พยายามออกจากหน้าเพื่อติดตามพฤติกรรม

JavaScript
window.onbeforeunload = function() {
  // ส่งข้อมูลไปยังเซิร์ฟเวอร์เพื่อติดตามพฤติกรรม
  sendAnalytics('user tried to leave the page');
};

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

  • ฟังก์ชันนี้ไม่สามารถแสดงข้อความแบบกำหนดเองได้ในบางเบราว์เซอร์ โดยเบราว์เซอร์อาจใช้ข้อความเตือนที่เป็นค่าเริ่มต้นเท่านั้น
  • ฟังก์ชัน onbeforeunload ควรใช้เฉพาะในกรณีที่จำเป็นจริง ๆ เพราะการใช้งานบ่อยครั้งอาจสร้างความรำคาญให้กับผู้ใช้
Tags
แชร์เรื่องนี้

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