jQuery - событие hashchange - PullRequest
Новая
       96

jQuery - событие hashchange

80 голосов
/ 22 июня 2010

Я использую: 

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

, чтобы связать функцию с событием изменения хеша.Кажется, это работает в IE8, Firefox и Chrome, но не в Safari, и я предполагаю, что не в более ранней версии IE.Для этих браузеров я хочу отключить мой код JavaScript, который использует хэш и событие hashchange.

Есть ли способ с jQuery, который я могу определить, поддерживает ли браузер событие hashchange?Может быть, что-то с jQuery.support ...

Ответы [ 12 ]

68 голосов
/ 22 июня 2010

Вы можете определить, поддерживает ли браузер событие: 

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

Смотри также:

27 голосов
/ 10 октября 2017

Обновленный ответ здесь по состоянию на 2017 год, если кому-то это понадобится, это то, что onhashchange хорошо поддерживается во всех основных браузерах. Подробнее см. caniuse . Для использования с jQuery плагин не требуется: 

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

Иногда я сталкиваюсь с устаревшими системами, в которых URL-адреса хэш-банга по-прежнему используются, и это полезно. Если вы создаете что-то новое и используете хеш-ссылки, я настоятельно рекомендую вам вместо этого использовать HTML5 pushState API.

18 голосов
/ 22 июня 2010

Существует плагин hashchange, который объединяет функциональность и проблемы с различными браузерами , доступный здесь .

17 голосов
/ 29 июня 2011

Другой подход к вашей проблеме ...

Существует 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.

7 голосов
/ 07 сентября 2011

попробуйте официальный сайт 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;
3 голосов
/ 07 июля 2012

Я только что столкнулся с той же проблемой (отсутствие события hashchange в IE7).Обходным решением, которое подходило для моих целей, было привязывание события щелчка к ссылкам, меняющим хеш.

2 голосов
/ 02 сентября 2015

Как насчет использования другого способа вместо хеш-события и прослушивания popstate, как. 

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

Этот метод отлично работает в большинстве браузеров, которые я пробовал до сих пор.

2 голосов
/ 28 июня 2011

Обратите внимание, что в случае IE 7 и IE 9, если statment даст true для ("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);
    }
1 голос
/ 08 августа 2012

этот крошечный плагин jQuery очень прост в использовании: https://github.com/finnlabs/jquery.observehashchange/

0 голосов
/ 15 апреля 2015

Вот обновленная версия @ 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);
}
Страница:
...