Xử lý sự kiện thay đổi neo URL trong js

Làm cách nào để viết mã gọi lại JavaScript sẽ được thực thi trên bất kỳ thay đổi nào trong liên kết URL?

Ví dụ từ http://example.com#ađếnhttp://example.com#b

Các Công cụ Tìm kiếm Tùy chỉnh của Google sử dụng bộ đếm thời gian để kiểm tra hàm băm so với giá trị trước đó, trong khi iframe con trên một miền riêng biệt cập nhật hàm băm vị trí của cha mẹ để chứa kích thước của nội dung tài liệu iframe. Khi bộ đếm thời gian bắt được thay đổi, cha mẹ có thể thay đổi kích thước iframe để khớp với nội dung để thanh cuộn không hiển thị.

Một cái gì đó như sau đạt được tương tự:

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 và Internet Explorer 8 đều hỗ trợ hashchangesự kiện:

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

và đặt nó lại với nhau:

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 cũng có một plugin sẽ kiểm tra sự kiện hashchange và cung cấp plugin riêng nếu cần - http://benalman.com/projects/jquery-hashchange-plugin/ .

CHỈNH SỬA : Hỗ trợ trình duyệt được cập nhật (một lần nữa).

Tôi khuyên bạn nên sử dụng addEventListenerthay vì ghi đè window.onhashchange, nếu không bạn sẽ chặn sự kiện đối với các plugin khác.

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

Nhìn vào việc sử dụng trình duyệt toàn cầu ngày nay, không cần thiết phải dự phòng nữa.

setInterval()là giải pháp duy nhất hiện nay. Nhưng có một số ánh sáng trong tương lai dưới dạng sự kiện hashchange

Từ những gì tôi thấy trong các câu hỏi SO khác, giải pháp trình duyệt chéo duy nhất khả thi là bộ đếm thời gian. Kiểm tra câu hỏi này chẳng hạn.

(Chỉ dành cho bản ghi.) Sự kiện tổng hợp YUI3 "hashchange" ít nhiều thực hiện điều tương tự như câu trả lời được chấp nhận

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

Bạn có thể lấy thêm thông tin từ cái này

Các loại sự kiện đột biến

Mô-đun sự kiện đột biến được thiết kế để cho phép thông báo về bất kỳ thay đổi nào đối với cấu trúc của tài liệu, bao gồm các sửa đổi đính kèm và văn bản.