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

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

onpopstate เป็น Event Attribute ใน HTML5 ที่ใช้สำหรับตรวจจับการเปลี่ยนแปลงใน session history ของเบราว์เซอร์ เช่น การกดปุ่ม “Back” หรือ “Forward” ในเบราว์เซอร์ เมื่อเหตุการณ์นี้ถูกเรียกขึ้น (เช่น เมื่อผู้ใช้เปลี่ยนหน้าไปที่สถานะก่อนหน้า) จะมีการส่ง Event พร้อมกับข้อมูลของสถานะปัจจุบันของ session history ผ่าน event.state

วิธีใช้งานพื้นฐาน

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>onpopstate Example</title>
  <script>
    window.onpopstate = function(event) {
      if (event.state) {
        alert("State: " + event.state.page);
      }
    };
    
    function changePage(state, title, url) {
      history.pushState(state, title, url);
      document.title = title;
      document.getElementById('content').textContent = "You are now on " + state.page;
    }
  </script>
</head>
<body>
  <button onclick="changePage({page: 'Page 1'}, 'Page 1', 'page1.html')">Go to Page 1</button>
  <button onclick="changePage({page: 'Page 2'}, 'Page 2', 'page2.html')">Go to Page 2</button>
  
  <div id="content">You are now on the Home page.</div>
</body>
</html>
  1. เมื่อผู้ใช้คลิกปุ่มใดปุ่มหนึ่ง จะมีการเรียกฟังก์ชัน changePage ที่จะทำการเพิ่มสถานะลงใน session history ผ่าน history.pushState()
  2. เมื่อผู้ใช้กดปุ่ม Back หรือ Forward บนเบราว์เซอร์ เบราว์เซอร์จะเรียก onpopstate event ทำให้สามารถเรียกดูสถานะ (event.state) และทำการปรับเนื้อหาตามสถานะที่อยู่ใน history นั้นได้

รูปแบบการใช้งานอื่น ๆ

1. การเปลี่ยนหน้าแบบไม่ต้องโหลดหน้าใหม่

หนึ่งในรูปแบบการใช้งานที่พบบ่อยที่สุดคือการสร้างเว็บแบบ Single Page Application (SPA) ซึ่งสามารถเปลี่ยนเนื้อหาโดยไม่ต้องโหลดหน้าใหม่ แต่ยังคงสามารถบันทึกสถานะการใช้งานของผู้ใช้ได้ผ่าน history.pushState() และ onpopstate

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SPA Example</title>
  <script>
    window.onpopstate = function(event) {
      if (event.state) {
        loadPageContent(event.state.page);
      }
    };
    
    function loadPageContent(page) {
      const content = {
        home: 'This is the home page.',
        about: 'This is the about page.',
        contact: 'This is the contact page.'
      };
      document.getElementById('content').textContent = content[page] || 'Page not found.';
    }
    
    function navigate(page) {
      history.pushState({page: page}, '', `${page}.html`);
      loadPageContent(page);
    }
  </script>
</head>
<body>
  <nav>
    <a href="javascript:void(0)" onclick="navigate('home')">Home</a>
    <a href="javascript:void(0)" onclick="navigate('about')">About</a>
    <a href="javascript:void(0)" onclick="navigate('contact')">Contact</a>
  </nav>
  
  <div id="content">This is the home page.</div>
</body>
</html>

ผู้ใช้สามารถคลิกเพื่อเปลี่ยนหน้า แต่ไม่ต้องโหลดหน้าใหม่ทั้งหมด จะมีเพียงเนื้อหาที่เปลี่ยนแปลง และเมื่อผู้ใช้กดปุ่ม Back หรือ Forward การทำงานของ onpopstate จะช่วยโหลดเนื้อหาให้ตรงกับสถานะของหน้า

2. การเก็บค่าของ Form หรือสถานะของการเลื่อนหน้า (Scroll Position)

บางครั้งเราต้องการบันทึกสถานะของ Scroll Position หรือค่าต่าง ๆ ที่ผู้ใช้กรอกในฟอร์ม เมื่อผู้ใช้กลับมาที่หน้าเดิม

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll Position Example</title>
  <script>
    window.onpopstate = function(event) {
      if (event.state) {
        window.scrollTo(0, event.state.scrollPosition);
      }
    };
    
    function saveScrollPosition() {
      const scrollPosition = window.pageYOffset;
      history.pushState({scrollPosition: scrollPosition}, '', '');
    }
    
    window.onscroll = saveScrollPosition;
  </script>
</head>
<body style="height: 2000px;">
  Scroll the page and then use the back/forward buttons to see the effect.
</body>
</html>

ในตัวอย่างนี้ เมื่อผู้ใช้เลื่อนหน้า ค่าของ Scroll Position จะถูกบันทึกไว้ใน session history ผ่าน history.pushState และเมื่อกลับมายังหน้าดังกล่าวผ่านปุ่ม Back หรือ Forward ระบบจะทำการเลื่อนหน้ากลับไปยังตำแหน่งเดิมตามที่ถูกบันทึกไว้ใน event.state

ข้อสังเกต

  • การใช้งาน onpopstate มักถูกใช้ร่วมกับ history.pushState() และ history.replaceState() เพื่อควบคุมการทำงานของ session history
  • onpopstate จะไม่ถูกเรียกเมื่อมีการใช้ pushState หรือ replaceState แต่จะทำงานเฉพาะเมื่อ session history เปลี่ยนแปลงโดยการกด Back หรือ Forward

สรุป

onpopstate เป็นเครื่องมือสำคัญสำหรับการสร้างประสบการณ์ที่ดียิ่งขึ้นให้กับผู้ใช้ โดยเฉพาะในเว็บไซต์ที่เป็น Single Page Application หรือในกรณีที่ต้องการบันทึกสถานะของผู้ใช้

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

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