Làm cách nào để phát hiện thay đổi trên thanh địa chỉ bằng JavaScript?

Question

Tôi có một ứng dụng nặng Ajax mà có thể có một URL như

http://example.com/myApp/#page=1 

Khi người dùng thao tác trang web, thanh địa chỉ có thể thay đổi một cái gì đó giống như

http://example.com/myApp/#page=5 

mà không cần tải lại trang.

Vấn đề của tôi là trình tự sau đây:

1. Một người dùng đánh dấu URL đầu tiên.
2. Người dùng thao tác ứng dụng sao cho URL thứ hai là trạng thái hiện tại.
3. Người dùng nhấp vào dấu trang được tạo ở bước 1.
4. URL trong thanh địa chỉ thay đổi từ http://example.com/myApp/#page=5 thành http://example.com/myApp/#page=1, nhưng tôi không biết cách nào để phát hiện thay đổi đã xảy ra.

Nếu tôi phát hiện thay đổi, một số JavaScript sẽ hành động trên đó.

Answer 1

HTML5 giới thiệu sự kiện băm hashchange cho phép bạn đăng ký thông báo thay đổi băm url mà không cần bỏ phiếu cho họ bằng bộ hẹn giờ.

Nó được hỗ trợ bởi tất cả các trình duyệt chính (Firefox 3.6, IE8, Chrome, các trình duyệt dựa trên Webkit khác), nhưng tôi vẫn khuyên bạn nên sử dụng thư viện xử lý sự kiện cho bạn - tức là bằng cách sử dụng bộ hẹn giờ các trình duyệt không hỗ trợ sự kiện HTML5 và sử dụng sự kiện khác.

Để biết thêm thông tin về sự kiện, hãy xem https://developer.mozilla.org/en/dom/window.onhashchange và http://msdn.microsoft.com/en-us/library/cc288209%28VS.85%29.aspx.

Answer 2

kiểm tra các địa chỉ hiện định kỳ sử dụng setTimeout/interval:

var oldLocation = location.href; 
setInterval(function() { 
     if(location.href != oldLocation) { 
      // do your action 
      oldLocation = location.href 
     } 
    }, 1000); // check every second 

Answer 3

Bạn nên mở rộng đối tượng vị trí để lộ một sự kiện mà bạn có thể liên kết với.

ví dụ:

window.location.prototype.changed = function(e){}; 

(function() //create a scope so 'location' is not global 
{ 
    var location = window.location.href; 
    setInterval(function() 
    { 
     if(location != window.location.href) 
     { 
      location = window.location.href; 
      window.location.changed(location); 
     } 
    }, 1000); 
})(); 

window.location.changed = function(e) 
{ 
    console.log(e);//outputs http://newhref.com 
    //this is fired when the window changes location 
} 

Answer 4

SWFaddress là một thư viện tuyệt vời cho các loại của sự vật.