jQuery - acara hashchange

Question 1

Saya menggunakan:

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

untuk mengikat fungsi ke acara perubahan hash. Ini tampaknya berfungsi di IE8, Firefox dan Chrome, tetapi tidak di Safari dan saya berasumsi tidak di versi IE sebelumnya. Untuk browser ini, saya ingin menonaktifkan kode JavaScript saya yang menggunakan hash danhashchange event.

Apakah ada cara dengan jQuery yang saya dapat mendeteksi jika browser mendukung hashchangeacara tersebut? Mungkin sesuatu dengan jQuery.support...

Question 2

Anda dapat mendeteksi apakah browser mendukung acara tersebut dengan:

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

Lihat juga:

Question 3

Jawaban yang diperbarui di sini pada tahun 2017, jika ada yang membutuhkannya, apakah itu onhashchangedidukung dengan baik di semua browser utama. Lihat caniuse untuk detailnya. Untuk menggunakannya dengan jQuery tidak diperlukan plugin:

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

Kadang-kadang saya menemukan sistem lama di mana URL hashbang masih digunakan dan ini sangat membantu. Jika Anda sedang membangun sesuatu yang baru dan menggunakan tautan hash, saya sangat menyarankan Anda untuk mempertimbangkan menggunakan API pushState HTML5 sebagai gantinya.

Question 4

Ada plug-in hashchange yang membungkus fungsionalitas dan masalah lintas browser yang tersedia di sini .

Question 5

Pendekatan berbeda untuk masalah Anda ...

Ada 3 cara untuk mengikat peristiwa hashchange ke sebuah metode:

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

Atau

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

Atau

<body onhashchange="doThisWhenTheHashChanges();">

Ini semua bekerja dengan IE 9, FF 5, Safari 5, dan Chrome 12 di Win 7.

Question 6

coba situs resmi Mozilla: https://developer.mozilla.org/en/DOM/window.onhashchange

mengutip sebagai berikut:

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

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

window.onhashchange = locationHashChanged;

Question 7

Saya baru saja mengalami masalah yang sama (kurangnya acara hashchange di IE7). Solusi yang cocok untuk tujuan saya adalah dengan mengikat peristiwa klik pada tautan pengubah hash.

<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

Perhatikan bahwa dalam kasus IE 7 dan IE 9 jika statment akan memberikan true untuk ("onhashchange" di windows) tetapi window.onhashchange tidak akan pernah menyala, jadi lebih baik untuk menyimpan hash dan memeriksanya setelah setiap 100 milidetik apakah itu berubah atau tidak untuk semua versi 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

Bagaimana dengan menggunakan cara yang berbeda daripada acara hash dan mendengarkan popstate seperti.

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

Metode ini berfungsi dengan baik di sebagian besar browser yang telah saya coba sejauh ini.

Question 10

plugin jQuery kecil ini sangat mudah digunakan: https://github.com/finnlabs/jquery.observehashchange/

Question 11

Saya pikir Chris Coyier memiliki solusi untuk masalah hashing itu, lihat screencastnya:

Praktik Terbaik dengan Konten Dinamis

Question 12

Gunakan Modernizr untuk mendeteksi kemampuan fitur. Secara umum jQuery menawarkan untuk mendeteksi fitur browser: http://api.jquery.com/jQuery.support/ . Namun, hashchange tidak ada dalam daftar.

The wiki dari Modernizr menawarkan daftar perpustakaan untuk menambah kemampuan HTML5 untuk browser lama. The daftar untuk hashchange termasuk pointer ke proyek HTML5 Sejarah API , yang tampaknya menawarkan fungsi yang Anda butuhkan jika Anda ingin meniru perilaku di browser lama.

Question 13

Berikut adalah versi terbaru dari @ johnny.rodgers

Harapan membantu seseorang.

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