จัดการเหตุการณ์การเปลี่ยนแปลงจุดยึด URL ใน js

ฉันจะเขียนโค้ดเรียกกลับ JavaScript ที่จะดำเนินการกับการเปลี่ยนแปลงใด ๆ ในจุดยึด URL ได้อย่างไร

ตัวอย่างเช่นจากhttp://example.com#aถึงhttp://example.com#b

Google Custom Search Engines ใช้ตัวจับเวลาเพื่อตรวจสอบแฮชกับค่าก่อนหน้าในขณะที่ iframe ลูกบนโดเมนแยกจะอัปเดตแฮชตำแหน่งของผู้ปกครองเพื่อให้มีขนาดของเนื้อหาของเอกสาร iframe เมื่อตัวจับเวลาจับการเปลี่ยนแปลงได้ผู้ปกครองสามารถปรับขนาด iframe ให้ตรงกับเนื้อหาเพื่อไม่ให้แถบเลื่อนแสดง

สิ่งต่อไปนี้ทำได้เหมือนกัน:

var storedHash = window.location.hash;
window.setInterval(function () {
    if (window.location.hash != storedHash) {
        storedHash = window.location.hash;
        hashChanged(storedHash);
    }
}, 100); // Google uses 100ms intervals I think, might be lower

Google Chrome 5, Safari 5, Opera 10.60 , Firefox 3.6และInternet Explorer 8 ทั้งหมดรองรับhashchangeเหตุการณ์นี้:

if ("onhashchange" in window) // does the browser support the hashchange event?
    window.onhashchange = function () {
        hashChanged(window.location.hash);
    }

และรวมเข้าด้วยกัน:

if ("onhashchange" in window) { // event supported?
    window.onhashchange = function () {
        hashChanged(window.location.hash);
    }
}
else { // event not supported:
    var storedHash = window.location.hash;
    window.setInterval(function () {
        if (window.location.hash != storedHash) {
            storedHash = window.location.hash;
            hashChanged(storedHash);
        }
    }, 100);
}

jQuery ยังมีปลั๊กอินที่จะตรวจสอบเหตุการณ์ hashchange และให้ของตัวเองถ้าจำเป็น - http://benalman.com/projects/jquery-hashchange-plugin/

แก้ไข : อัปเดตการรองรับเบราว์เซอร์ (อีกครั้ง)

ฉันขอแนะนำให้ใช้addEventListenerแทนการเขียนทับwindow.onhashchangeมิฉะนั้นคุณจะบล็อกเหตุการณ์สำหรับปลั๊กอินอื่น ๆ

window.addEventListener('hashchange', function() {
...
})

เมื่อพิจารณาถึงการใช้งานเบราว์เซอร์ทั่วโลกในปัจจุบันไม่จำเป็นต้องใช้ทางเลือกอีกต่อไป

จากสิ่งที่ฉันเห็นในคำถาม SO อื่น ๆ โซลูชันข้ามเบราว์เซอร์เดียวที่ใช้งานได้คือตัวจับเวลา ลองดูคำถามนี้เช่น

setInterval()เป็นเพียงโซลูชันสากลสำหรับตอนนี้ แต่มีแสงบางอย่างในอนาคตในรูปแบบของเหตุการณ์ hashchange

(เฉพาะสำหรับการบันทึก) เหตุการณ์สังเคราะห์ "hashchange" ของ YUI3 ทำสิ่งเดียวกันกับคำตอบที่ยอมรับมากหรือน้อย

YUI().use('history-hash', function (Y) {
  Y.on('hashchange', function (e) {
    // Handle hashchange events on the current window.
  }, Y.config.win);
});

คุณสามารถรับข้อมูลเพิ่มเติมได้จากสิ่งนี้

ประเภทเหตุการณ์การกลายพันธุ์

โมดูลเหตุการณ์การกลายพันธุ์ได้รับการออกแบบมาเพื่อให้สามารถแจ้งเตือนการเปลี่ยนแปลงโครงสร้างของเอกสารรวมถึงการแก้ไข Attr และข้อความ