jQuery - hashchange olayı

Question 1

Ben kullanıyorum:

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

hash change olayına bir işlevi bağlamak için. Bu IE8, Firefox ve Chrome'da çalışıyor gibi görünüyor, ancak Safari'de çalışmıyor ve IE'nin önceki sürümlerinde olmadığını varsayıyorum. Bu tarayıcılar için, hash ve hashchangeolayı kullanan JavaScript kodumu devre dışı bırakmak istiyorum .

JQuery ile tarayıcının hashchangeolayı destekleyip desteklemediğini algılayabileceğim bir yol var mı ? Belki bir şey jQuery.support...

Question 2

Tarayıcının olayı destekleyip desteklemediğini şu şekilde tespit edebilirsiniz:

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

Ayrıca bakınız:

Question 3

2017 itibariyle burada güncellenmiş bir cevap, herhangi birinin ihtiyaç duyması durumunda, onhashchangetüm büyük tarayıcılarda iyi destekleniyor. Ayrıntılar için caniuse'ye bakın. JQuery ile kullanmak için eklentiye gerek yoktur:

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

Bazen hashbang URL'lerinin hala kullanıldığı eski sistemlerle karşılaşıyorum ve bu yardımcı oluyor. Yeni bir şey oluşturuyor ve karma bağlantılar kullanıyorsanız, bunun yerine HTML5 pushState API'yi kullanmayı düşünmenizi şiddetle tavsiye ederim.

Question 4

Burada bulunan işlevselliği ve tarayıcılar arası sorunları özetleyen bir hashchange eklentisi var .

Question 5

Sorununuza farklı bir yaklaşım ...

Hashchange olayını bir yönteme bağlamanın 3 yolu vardır:

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

Veya

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

Veya

<body onhashchange="doThisWhenTheHashChanges();">

Bunların tümü Win 7'de IE 9, FF 5, Safari 5 ve Chrome 12 ile çalışır.

Question 6

Mozilla resmi sitesini deneyin: https://developer.mozilla.org/en/DOM/window.onhashchange

aşağıdaki gibi alıntı yapın:

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

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

window.onhashchange = locationHashChanged;

Question 7

Az önce aynı sorunla karşılaştım (IE7'de hashchange olayının olmaması). Amaçlarıma uygun bir çözüm, karma değiştiren bağlantıların tıklama olayını bağlamaktı.

<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

IE 7 ve IE 9 durumunda, ifade (pencerelerde "onhashchange") için doğruysa ancak window.onhashchange hiçbir zaman ateşlenmez, bu nedenle hash depolamak ve değiştirilip değiştirilmesin her 100 milisaniyede bir kontrol etmek daha iyidir. IE'nin tüm sürümleri için.

    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

Hash olayı yerine farklı bir yol kullanmaya ve popstate like'ı dinlemeye ne dersiniz?

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

Bu yöntem, şimdiye kadar denediğim çoğu tarayıcıda iyi çalışıyor.

Question 10

bu küçük jQuery eklentisinin kullanımı çok basittir: https://github.com/finnlabs/jquery.observehashchange/

Question 11

Chris Coyier'in bu hash sorununa bir çözümü olduğunu düşünüyorum, ekran video kaydına bir göz atın:

Dinamik İçerikle En İyi Uygulamalar

Question 12

Özellik yeteneklerinin tespiti için Modernizr'i kullanın . Genel olarak jQuery, tarayıcı özelliklerini tespit etmeyi önerir: http://api.jquery.com/jQuery.support/ . Ancak hashchange listede yok.

Modernizr wiki eski tarayıcılara HTML5 özellikleri eklemek için kütüphanelerin listesini sunmaktadır. Hashchange için liste proje için bir işaretçi içeren HTML5 Tarih API eski tarayıcılarda davranışını taklit etmek istiyorsa gerekir işlevsellik sunmak gibi görünüyor.

Question 13

İşte @ johnny.rodgers'ın güncellenmiş sürümü

Umut birine yardım eder.

// 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);
}