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

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

onhashchange เป็น event attribute ใน HTML5 ที่จะทำงานเมื่อ URL fragment identifier หรือ hash (ส่วนของ URL ที่อยู่หลังเครื่องหมาย #) เปลี่ยนแปลงไป เช่น เมื่อผู้ใช้เปลี่ยน hash ของ URL หรือเมื่อโปรแกรมทำการเปลี่ยนแปลง hash ค่าใหม่ใน URL

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

มีหลากหลายวิธีในการใช้งาน onhashchange ทั้งจากการตั้งค่าผ่าน HTML attributes, JavaScript, และการใช้ event listener เรามาดูตัวอย่างแต่ละรูปแบบกันครับ

การใช้งาน onhashchange ผ่าน HTML Attribute

สามารถใช้ onhashchange event attribute โดยตรงในแท็ก <body> หรือ <a> เพื่อให้ทำงานเมื่อ hash ของ URL เปลี่ยนแปลง

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onhashchange Example</title>
</head>
<body onhashchange="alert('Hash has changed!');">
    <a href="#section1">Go to Section 1</a>
    <a href="#section2">Go to Section 2</a>
</body>
</html>

ในตัวอย่างนี้ เมื่อผู้ใช้คลิกที่ลิงก์ใด ๆ ในหน้าเว็บ Hash จะเปลี่ยนไปเป็น #section1 หรือ #section2 ตามลำดับ และจะแสดงการแจ้งเตือน (alert) ว่า hash ได้เปลี่ยนแปลงแล้ว

การใช้งาน onhashchange ด้วย JavaScript

สามารถกำหนด onhashchange ผ่าน JavaScript เพื่อเพิ่มการจัดการแบบกำหนดเองได้

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onhashchange Example</title>
</head>
<body>
    <a href="#section1">Go to Section 1</a>
    <a href="#section2">Go to Section 2</a>

    <script>
        window.onhashchange = function() {
            alert('Hash changed to: ' + location.hash);
        };
    </script>
</body>
</html>

ในกรณีนี้ เมื่อ hash เปลี่ยนแปลง การแจ้งเตือน (alert) จะแสดงค่า hash ที่เปลี่ยนไปเช่น #section1 หรือ #section2

การใช้งาน onhashchange ด้วย Event Listener

สามารถใช้งาน addEventListener เพื่อฟังการเปลี่ยนแปลงของ hash และเรียกใช้ฟังก์ชันเมื่อเหตุการณ์เกิดขึ้น

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onhashchange Example</title>
</head>
<body>
    <a href="#section1">Go to Section 1</a>
    <a href="#section2">Go to Section 2</a>

    <script>
        window.addEventListener('hashchange', function() {
            console.log('Hash changed to: ' + location.hash);
        });
    </script>
</body>
</html>

ในกรณีนี้จะไม่มีการแจ้งเตือนแบบ popup แต่จะมีการบันทึกข้อความในคอนโซลเมื่อ hash มีการเปลี่ยนแปลง

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

การนำไปใช้ใน Single Page Application (SPA): onhashchange สามารถใช้ในการพัฒนาเว็บที่มีการเปลี่ยนหน้าโดยไม่ต้องโหลดทั้งหน้าใหม่ เช่น เปลี่ยนเนื้อหาของส่วนต่าง ๆ ของหน้าเว็บเมื่อ hash เปลี่ยนแปลง

JavaScript
window.addEventListener('hashchange', function() {
    if (location.hash === '#section1') {
        document.getElementById('content').innerHTML = 'Content for Section 1';
    } else if (location.hash === '#section2') {
        document.getElementById('content').innerHTML = 'Content for Section 2';
    }
});

การใช้งานร่วมกับการทำ Scroll ภายในหน้าเว็บ: ใช้ hash เป็นตัวบ่งบอกการเลื่อนไปยังส่วนต่าง ๆ ของหน้าเว็บเมื่อ hash เปลี่ยน เช่น เลื่อนหน้าไปยังตำแหน่งที่ต้องการ

JavaScript
window.addEventListener('hashchange', function() {
    const targetElement = document.getElementById(location.hash.substring(1));
    if (targetElement) {
        targetElement.scrollIntoView();
    }
});

การบันทึกสถานะของผู้ใช้งาน (User State): onhashchange สามารถใช้บันทึกสถานะของผู้ใช้งานเช่นการเลือกเมนู หรือขั้นตอนการทำงาน เพื่อให้ผู้ใช้กลับมาที่เดิมเมื่อโหลดหน้าใหม่โดยใช้ hash

สรุป

onhashchange เป็น event ที่มีประโยชน์ในการตรวจจับการเปลี่ยนแปลงของ hash ใน URL โดยสามารถใช้งานได้ทั้งผ่าน HTML attribute, JavaScript, และ Event Listener ช่วยให้เราสามารถพัฒนาฟังก์ชันการทำงานบนหน้าเว็บที่มีการเปลี่ยนแปลงเนื้อหาหรือสถานะของเว็บเพจได้โดยไม่ต้องรีเฟรชทั้งหน้า

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

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