jQuery - sự kiện hashchange

Question 1

Tôi đang dùng:

$(window).bind( 'hashchange', function(e) { });

để liên kết một hàm với sự kiện thay đổi băm. Điều này dường như hoạt động trong IE8, Firefox và Chrome, nhưng không hoạt động trong Safari và tôi cho rằng không phải trong phiên bản IE trước đó. Đối với các trình duyệt này, tôi muốn vô hiệu hóa mã JavaScript của mình sử dụng hàm băm và hashchangesự kiện.

Có cách nào với jQuery mà tôi có thể phát hiện xem trình duyệt có hỗ trợ hashchangesự kiện không? Có lẽ cái gì đó với jQuery.support...

Question 2

Bạn có thể phát hiện xem trình duyệt có hỗ trợ sự kiện hay không bằng cách:

if ("onhashchange" in window) {
  //...
}

Xem thêm:

Question 3

Một câu trả lời được cập nhật ở đây kể từ năm 2017, nếu bất kỳ ai cần, là nó onhashchangeđược hỗ trợ tốt trong tất cả các trình duyệt chính. Xem caniuse để biết chi tiết. Để sử dụng nó với jQuery, không cần plugin:

$( window ).on( 'hashchange', function( e ) {
    console.log( 'hash changed' );
} );

Đôi khi tôi gặp các hệ thống cũ nơi URL hashbang vẫn được sử dụng và điều này rất hữu ích. Nếu bạn đang xây dựng thứ gì đó mới và sử dụng liên kết băm, tôi thực sự khuyên bạn nên cân nhắc sử dụng API HTML5 pushState thay thế.

Question 4

Có một trình cắm thêm hashchange giúp giải quyết các vấn đề về chức năng và trình duyệt chéo có sẵn tại đây .

Question 5

Một cách tiếp cận khác cho vấn đề của bạn ...

Có 3 cách để liên kết sự kiện băm với một phương thức:

<script>
    window.onhashchange = doThisWhenTheHashChanges;
</script>

Hoặc là

<script>
    window.addEventListener("hashchange", doThisWhenTheHashChanges, false);
</script>

Hoặc là

<body onhashchange="doThisWhenTheHashChanges();">

Tất cả đều hoạt động với IE 9, FF 5, Safari 5 và Chrome 12 trên Win 7.

Question 6

thử trang web chính thức của Mozilla: https://developer.mozilla.org/en/DOM/window.onhashchange

trích dẫn như sau:

if ("onhashchange" in window) {
    alert("The browser supports the hashchange event!");
}

function locationHashChanged() {
    if (location.hash === "#somecoolfeature") {
        somecoolfeature();
    }
}

window.onhashchange = locationHashChanged;

Question 7

Tôi vừa gặp phải vấn đề tương tự (thiếu sự kiện hashchange trong IE7). Một giải pháp phù hợp với mục đích của tôi là ràng buộc sự kiện nhấp chuột của các liên kết thay đổi hàm băm.

<a class='hash-changer' href='#foo'>Foo</a>

<script type='text/javascript'>

if (("onhashchange" in window) && !($.browser.msie)) { 

    //modern browsers 
    $(window).bind('hashchange', function() {
        var hash = window.location.hash.replace(/^#/,'');
        //do whatever you need with the hash
    });

} else {

    //IE and browsers that don't support hashchange
    $('a.hash-changer').bind('click', function() {
        var hash = $(this).attr('href').replace(/^#/,'');
        //do whatever you need with the hash
    });

}

</script>

Question 8

Lưu ý rằng trong trường hợp của IE 7 và IE 9 nếu trạng thái sẽ trả về true cho ("onhashchange" trong windows) nhưng window.onhashchange sẽ không bao giờ kích hoạt, vì vậy tốt hơn hết bạn nên lưu trữ hàm băm và kiểm tra nó sau mỗi 100 mili giây xem nó có thay đổi hay không cho tất cả các phiên bản của IE.

    if (("onhashchange" in window) && !($.browser.msie)) { 
         window.onhashchange = function () { 
              alert(window.location.hash);             
         }            
         // Or $(window).bind( 'hashchange',function(e) {  
         //       alert(window.location.hash); 
         //   });              
    }
    else { 
        var prevHash = window.location.hash;
        window.setInterval(function () {
           if (window.location.hash != prevHash) {
              prevHash = window.location.hash;
              alert(window.location.hash);
           }
        }, 100);
    }

Question 9

Còn về việc sử dụng một cách khác thay vì sự kiện băm và nghe popstate như thế nào.

window.addEventListener('popstate', function(event)
{
    if(window.location.hash) {
            var hash = window.location.hash;
            console.log(hash);
    }
});

Phương pháp này hoạt động tốt trong hầu hết các trình duyệt mà tôi đã thử cho đến nay.

Question 10

plugin jQuery nhỏ bé này rất dễ sử dụng: https://github.com/finnlabs/jquery.observehashchange/

Question 11

Tôi nghĩ Chris Coyier có giải pháp cho vấn đề băm đó, hãy xem đoạn video trên màn hình của anh ấy:

Các phương pháp hay nhất với nội dung động

Question 12

Sử dụng Modernizr để phát hiện các khả năng của tính năng. Nói chung, jQuery cung cấp để phát hiện các tính năng của trình duyệt: http://api.jquery.com/jQuery.support/ . Tuy nhiên, hashchange không có trong danh sách.

Các wiki của Modernizr cung cấp một danh sách các thư viện để thêm các khả năng HTML5 để trình duyệt cũ. Các danh sách cho hashchange bao gồm một con trỏ đến các dự án HTML5 API lịch sử , mà dường như để cung cấp các chức năng bạn sẽ cần nếu bạn muốn bắt chước những hành vi trong các trình duyệt cũ.

Question 13

Đây là phiên bản cập nhật của @ johnny.rodgers

Hy vọng sẽ giúp ai đó.

// ie9 ve ie7 return true but never fire, lets remove ie less then 10
if(("onhashchange" in window) && navigator.userAgent.toLowerCase().indexOf('msie') == -1){ // event supported?
    window.onhashchange = function(){
        var url = window.location.hash.substring(1);
        alert(url);
    }
}
else{ // event not supported:
    var storedhash = window.location.hash;
    window.setInterval(function(){
        if(window.location.hash != storedhash){
            storedhash = window.location.hash;
            alert(url);
        }
    }, 100);
}