jQuery - เหตุการณ์ hashchange

Question 1

ฉันใช้:

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

เพื่อผูกฟังก์ชันเข้ากับเหตุการณ์การเปลี่ยนแปลงแฮช ดูเหมือนว่าจะใช้งานได้ใน IE8, Firefox และ Chrome แต่ไม่ใช่ใน Safari และฉันคิดว่าไม่ใช่ใน IE เวอร์ชันก่อนหน้า สำหรับเบราว์เซอร์เหล่านี้ฉันต้องการปิดใช้งานโค้ด JavaScript ของฉันที่ใช้แฮชและhashchangeเหตุการณ์

มีวิธีใดบ้างกับ jQuery ที่ฉันสามารถตรวจจับได้ว่าเบราว์เซอร์รองรับhashchangeเหตุการณ์นี้หรือไม่ อาจจะมีบางอย่างกับjQuery.support...

Question 2

คุณตรวจสอบได้ว่าเบราว์เซอร์รองรับเหตุการณ์หรือไม่โดย:

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

ดูสิ่งนี้ด้วย:

Question 3

คำตอบที่อัปเดตที่นี่ในปี 2017 ที่ทุกคนต้องการonhashchangeคือได้รับการสนับสนุนอย่างดีในเบราว์เซอร์หลัก ๆ ทั้งหมด ดูรายละเอียดได้ที่caniuse ในการใช้กับ jQuery ไม่จำเป็นต้องใช้ปลั๊กอิน:

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

บางครั้งฉันเจอระบบเดิมที่ยังคงใช้ URL ของแฮชบังอยู่และสิ่งนี้มีประโยชน์ หากคุณกำลังสร้างสิ่งใหม่ ๆ และใช้ลิงก์แฮชฉันขอแนะนำให้คุณพิจารณาใช้ HTML5 pushState API แทน

Question 4

มี hashchange Plug-in ซึ่ง wraps ขึ้นการทำงานและปัญหาข้ามเบราเซอร์เป็นอยู่ที่นี่

Question 5

แนวทางที่แตกต่างสำหรับปัญหาของคุณ ...

มี 3 วิธีในการผูกเหตุการณ์ hashchange กับวิธีการ:

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

หรือ

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

หรือ

<body onhashchange="doThisWhenTheHashChanges();">

ทั้งหมดนี้ใช้ได้กับ IE 9, FF 5, Safari 5 และ Chrome 12 บน Win 7

Question 6

ลองเว็บไซต์ทางการของ Mozilla: https://developer.mozilla.org/en/DOM/window.onhashchange

อ้างดังต่อไปนี้:

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

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

window.onhashchange = locationHashChanged;

Question 7

ฉันเพิ่งพบปัญหาเดียวกัน (ไม่มีเหตุการณ์ hashchange ใน IE7) วิธีแก้ปัญหาที่เหมาะกับวัตถุประสงค์ของฉันคือการผูกเหตุการณ์การคลิกของลิงก์ที่เปลี่ยนแฮช

<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 และ IE 9 หาก statment เป็นจริงสำหรับ ("onhashchange" ใน windows) แต่ window.onhashchange จะไม่เริ่มทำงานดังนั้นจึงควรจัดเก็บแฮชและตรวจสอบทุก ๆ 100 มิลลิวินาทีว่ามีการเปลี่ยนแปลงหรือไม่ สำหรับ 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

สิ่งที่เกี่ยวกับการใช้วิธีอื่นแทนเหตุการณ์แฮชและฟังป๊อปสเตทเช่น

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

วิธีนี้ใช้ได้ดีในเบราว์เซอร์ส่วนใหญ่ที่ฉันได้ลองทำมาแล้ว

Question 10

ปลั๊กอิน jQuery เล็ก ๆ นี้ใช้งานง่ายมาก: https://github.com/finnlabs/jquery.observehashchange/

Question 11

ฉันคิดว่า Chris Coyier มีวิธีแก้ปัญหาสำหรับการแฮชนั้นลองดู screencast ของเขา:

แนวทางปฏิบัติที่ดีที่สุดสำหรับเนื้อหาแบบไดนามิก

Question 12

ใช้Modernizrเพื่อตรวจจับความสามารถของฟีเจอร์ ในข้อเสนอ jQuery ทั่วไปในการตรวจสอบคุณสมบัติเบราว์เซอร์: http://api.jquery.com/jQuery.support/ อย่างไรก็ตาม hashchange ไม่อยู่ในรายการ

วิกิพีเดียของ Modernizrมีรายการของห้องสมุดเพื่อเพิ่มขีดความสามารถของ HTML5 เบราว์เซอร์เก่า รายการ hashchangeรวมถึงตัวชี้ไปยังโครงการประวัติศาสตร์ HTML5 APIซึ่งดูเหมือนว่าจะมีฟังก์ชันการทำงานที่คุณต้องการหากคุณต้องการที่จะเลียนแบบพฤติกรรมในเบราว์เซอร์เก่า

Question 13

นี่คือเวอร์ชันอัปเดตของ @ johnny.rodgers

ความหวังช่วยใครบางคน

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