web-dev-qa-db-ja.com

jQuery-hashchangeイベント

私は使っている：

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

ハッシュ変更イベントに関数をバインドします。これはIE8、Firefox、Chromeで動作するようですが、Safariでは動作せず、IEの以前のバージョンでは動作しないと思います。これらのブラウザーでは、ハッシュとhashchangeイベントを使用するJavaScriptコードを無効にします。

ブラウザがhashchangeイベントをサポートしているかどうかを検出できるjQueryの方法はありますか？たぶんjQuery.support...と何か.

javascriptjqueryhashchangebrowser-state
82
Ian Herbert

ブラウザがイベントをサポートしているかどうかは、次の方法で検出できます。

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

こちらもご覧ください：

68
CMS

2017年時点での更新された回答は、誰でも必要な場合、onhashchangeはすべての主要なブラウザーで十分にサポートされているということです。詳細については、 caniuse を参照してください。 jQueryで使用するには、プラグインは必要ありません。

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

時々、hashbang URLがまだ使用されているレガシーシステムに遭遇しますが、これは役に立ちます。新しいものを作成してハッシュリンクを使用している場合は、代わりにHTML5 pushState APIの使用を検討することを強くお勧めします。

30
Kevin Leary

問題に対する別のアプローチ...

Hashchangeイベントをメソッドにバインドするには、3つの方法があります。

<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で動作します。

18
james.garriss

機能とクロスブラウザの問題をまとめるhashchangeプラグインがあります こちらから入手可能 。

18
James Westgate

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;
7
Paul Lan

私はちょうど同じ問題に遭遇しました（IE7のhashchangeイベントの欠如）。私の目的に合った回避策は、ハッシュを変更するリンクのクリックイベントをバインドすることでした。

<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>
3
johnny.rodgers

IE 7およびIE 9の場合、（windowsの "onhashchange"）に対して文がtrueになりますが、window.onhashchangeは起動しないため、ハッシュを保存する方が良いことに注意してください。 IEのすべてのバージョンで変更されたかどうかを100ミリ秒ごとに確認します。

    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);
    }
2
Khan Salahuddin

ハッシュイベントの代わりに別の方法を使用してpopstateをリッスンするのはどうですか。

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

この方法は、これまで試したほとんどのブラウザーで正常に機能します。

2
Sven van den Boogaart

この小さなjQueryプラグインは非常に使いやすいです。 https://github.com/finnlabs/jquery.observehashchange/

1
Morteza Ziyae

Chris Coyierがそのハッシュ問題の解決策を持っていると思います。彼のスクリーンキャストを見てください：

動的コンテンツのベストプラクティス

0
Sarfraz

@ 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);
}
0
Deniz Porsuk

機能機能の検出には、 Modernizr を使用します。一般に、jQueryはブラウザ機能を検出するために提供しています： http://api.jquery.com/jQuery.support/ 。ただし、hashchangeはリストに含まれていません。

Modernizrのwiki は、古いブラウザーにHTML5機能を追加するためのライブラリーのリストを提供します。 hashchangeのリスト にはプロジェクトへのポインターが含まれています HTML5 History API は、古いブラウザーで動作をエミュレートする場合に必要な機能を提供しているようです。

0
koppor