[javascript] jQuery-해시 변경 이벤트

Question 1

나는 사용하고있다 :

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

함수를 해시 변경 이벤트에 바인딩합니다. 이것은 IE8, Firefox 및 Chrome에서 작동하는 것처럼 보이지만 Safari에서는 작동하지 않으며 이전 버전의 IE에서는 작동하지 않는다고 가정합니다. 이러한 브라우저의 경우 해시와 hashchange이벤트 를 사용하는 JavaScript 코드를 비활성화하고 싶습니다 .

브라우저가 hashchange이벤트를 지원하는지 감지 할 수있는 jQuery를 사용하는 방법이 있습니까? 어쩌면 뭔가 jQuery.support…

Question 2

다음을 통해 브라우저가 이벤트를 지원하는지 감지 할 수 있습니다.

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

또한보십시오:

Question 3

2017 년 현재 업데이트 된 답변은 누구나 필요할 경우 onhashchange모든 주요 브라우저에서 잘 지원 된다는 것 입니다. 자세한 내용은 caniuse 를 참조하십시오. jQuery와 함께 사용하려면 플러그인이 필요하지 않습니다.

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

때때로 나는 hashbang URL이 여전히 사용되는 레거시 시스템을 발견하고 이것은 도움이됩니다. 새로운 것을 구축하고 해시 링크를 사용하는 경우 HTML5 pushState API를 대신 사용하는 것이 좋습니다.

Question 4

여기에서 사용 가능한 기능 및 크로스 브라우저 문제를 요약하는 해시 변경 플러그인이 있습니다 .

Question 5

문제에 대한 다른 접근 방식 …

hashchange 이벤트를 메서드에 바인딩하는 세 가지 방법이 있습니다.

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

또는

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

또는

<body onhashchange="doThisWhenTheHashChanges();">

이들은 모두 Win 7의 IE 9, FF 5, Safari 5 및 Chrome 12에서 작동합니다.

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

방금 같은 문제가 발생했습니다 (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의 경우 (윈도우의 “onhashchange”)에 대해 설명이 참이면 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);
    }