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

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

onpageshow เป็นหนึ่งใน Event Attributes ใน HTML5 ซึ่งถูกเรียกใช้งานเมื่อหน้าเว็บเพจแสดงผลขึ้นมา (ถูกโหลดเสร็จสมบูรณ์) โดยจะถูกกระตุ้นในสองสถานการณ์หลัก

  1. เมื่อมีการเปิดหน้าเว็บเพจครั้งแรก
  2. เมื่อหน้าเว็บเพจถูกโหลดจากแคช (เช่น หลังจากการกดปุ่มย้อนกลับ หรือกดปุ่มเดินหน้าในเบราว์เซอร์)

onpageshow จะทำงานได้ในแท็ก <body> หรือองค์ประกอบอื่น ๆ ของ HTML ผ่านการกำหนดเป็น event handler

การใช้งาน onpageshow

การกำหนดใน HTML โดยตรง สามารถกำหนดให้ onpageshow ทำงานได้โดยตรงในโค้ด HTML ผ่านการเขียนลงในแท็ก <body> หรือองค์ประกอบอื่น ๆ

HTML
<body onpageshow="showAlert()">
   <h1>Welcome to the webpage!</h1>
   <script>
      function showAlert() {
         alert("This page has been shown!");
      }
   </script>
</body>

เมื่อเปิดหน้าเว็บหรือโหลดใหม่อีกครั้งจากแคช การแจ้งเตือนจะถูกแสดงขึ้นว่า “This page has been shown!”

การใช้งานร่วมกับ JavaScript สามารถกำหนด event listener ผ่าน JavaScript เพื่อใช้ onpageshow ได้เช่นกัน

HTML
<body>
   <h1>Welcome to the webpage!</h1>
   <script>
      window.addEventListener('pageshow', function(event) {
         console.log("Page is being shown", event);
      });
   </script>
</body>

ในตัวอย่างนี้ หากหน้าเว็บถูกโหลดหรือดึงมาจากแคช ค่าข้อมูลจะถูกแสดงในคอนโซลของเบราว์เซอร์ว่า “Page is being shown” พร้อมข้อมูลของ event

การตรวจสอบการโหลดจากแคช ในบางครั้ง การโหลดหน้าจากแคชอาจต้องใช้วิธีการพิเศษเพื่อตรวจสอบว่าเกิดจากการเรียกข้อมูลจากแคชหรือไม่ ซึ่งสามารถใช้ event.persisted ได้

HTML
<body>
   <h1>Welcome to the webpage!</h1>
   <script>
      window.addEventListener('pageshow', function(event) {
         if (event.persisted) {
            console.log("This page was loaded from cache");
         } else {
            console.log("This page was freshly loaded");
         }
      });
   </script>
</body>

event.persisted จะเป็น true หากหน้าเว็บถูกโหลดมาจากแคช ซึ่งจะช่วยให้สามารถตรวจสอบและดำเนินการเพิ่มเติมได้ตามต้องการ

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

HTML
<body>
   <h1>Sample Form</h1>
   <form id="sampleForm">
      <input type="text" id="name" placeholder="Enter your name" />
      <button type="submit">Submit</button>
   </form>

   <script>
      window.addEventListener('pageshow', function(event) {
         if (sessionStorage.getItem('formName')) {
            document.getElementById('name').value = sessionStorage.getItem('formName');
         }
      });

      document.getElementById('name').addEventListener('input', function() {
         sessionStorage.setItem('formName', this.value);
      });
   </script>
</body>

ในตัวอย่างนี้ ข้อมูลที่กรอกลงในฟอร์มจะถูกบันทึกไว้ใน sessionStorage และเมื่อผู้ใช้กลับมาที่หน้าเว็บ (เช่น จากการกดปุ่มย้อนกลับ) ข้อมูลที่บันทึกไว้จะถูกเรียกคืน

สรุป

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

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

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