Pobierz wydarzenie hashchange do pracy we wszystkich przeglądarkach (w tym IE7)

Question

Mam pewien kod (napisany przez innego programistę), który robi stronę AJAX ładującą się w WordPress (np. Bez przeładowywania strony) po kliknięciu elementu nawigacji, AJAX odświeża główny obszar zawartości. Mój problem polega na tym, że jest on uszkodzony w IE7 i nie mam pojęcia, od czego zacząć w kwestii debugowania.

Oryginalne linie otwarcia były

var queue = 0; 

$('document').ready(function() { 
    window.addEventListener("hashchange", hashChange, false); 

    // Define window location variables 
    var windowHost = window.location.host, 
     windowHash = window.location.hash, 
     windowPath = window.location.pathname; 

Ale zmieniłem je, aby addEventListener warunkowego na podstawie tego, czy ta metoda była obecna, czy nie. Niektóre badania powiedziały mi, że ta metoda nie jest dostępna w starszych wersjach IE (na przykład 7 w moim przypadku). Ponadto konsola debugowania IE7 identyfikuje to jako niedostępną metodę, więc jest to całkiem jasne. I przepisał linie następująco, ale kod nadal nie działa:

var queue = 0; 

$('document').ready(function() { 
    if(window.addEventListener) { 
     window.addEventListener("hashchange", hashChange, false); 
    } 
    else if (window.attachEvent) { 
     window.attachEvent("hashchange", hashchange, false);  
    } 
    // Define window location variables 
    var windowHost = window.location.host, 
     windowHash = window.location.hash, 
     windowPath = window.location.pathname; 

Pełne Oryginalny scenariusz może być postrzegane w tym pastebin: http://pastebin.com/Jc9ySvrb

Answer 1

• attachEvent wymaga zdarzenia mają być poprzedzona on.
• Masz różne kapitaliki dla metody. Zmień hashchange w attachEvent na hashChange, aby zdarzenie zadziałało w IE8.
• Użyj sugerowanej implementacji, aby obsłużyć implementację hashchange dla IE7 i innych starych przeglądarek.

Stworzyłem implementację różnych przeglądarkach, który dodaje funkcję hashchange do przeglądarek, nawet tych, którzy czynią not support go. Opóźnienie jest oparte na the specification.

//function hashchange is assumed to exist. This function will fire on hashchange 
if (!('onhashchange' in window)) { 
    var oldHref = location.href; 
    setInterval(function() { 
     var newHref = location.href; 
     if (oldHref !== newHref) { 
      var _oldHref = oldHref; 
      oldHref = newHref; 
      hashChange.call(window, { 
       'type': 'hashchange', 
       'newURL': newHref, 
       'oldURL': _oldHref 
      }); 
     } 
    }, 100); 
} else if (window.addEventListener) { 
    window.addEventListener("hashchange", hashChange, false); 
} 
else if (window.attachEvent) { 
    window.attachEvent("onhashchange", hashChange);  
} 

Uwaga: Kod ten jest przydatny do jeden hashchange imprezy. Jeśli chcesz dodać wielu programów obsługi, użyj następującej metody.
Definiuje dwie funkcje: addHashChange i i. Obie metody przyjmują funkcję jako argument.

(function() { 
    if ('onhashchange' in window) { 
     if (window.addEventListener) { 
      window.addHashChange = function(func, before) { 
       window.addEventListener('hashchange', func, before); 
      }; 
      window.removeHashChange = function(func) { 
       window.removeEventListener('hashchange', func); 
      }; 
      return; 
     } else if (window.attachEvent) { 
      window.addHashChange = function(func) { 
       window.attachEvent('onhashchange', func); 
      }; 
      window.removeHashChange = function(func) { 
       window.detachEvent('onhashchange', func); 
      }; 
      return; 
     } 
    } 
    var hashChangeFuncs = []; 
    var oldHref = location.href; 
    window.addHashChange = function(func, before) { 
     if (typeof func === 'function') 
      hashChangeFuncs[before?'unshift':'push'](func); 
    }; 
    window.removeHashChange = function(func) { 
     for (var i=hashChangeFuncs.length-1; i>=0; i--) 
      if (hashChangeFuncs[i] === func) 
       hashChangeFuncs.splice(i, 1); 
    }; 
    setInterval(function() { 
     var newHref = location.href; 
     if (oldHref !== newHref) { 
      var _oldHref = oldHref; 
      oldHref = newHref; 
      for (var i=0; i<hashChangeFuncs.length; i++) { 
       hashChangeFuncs[i].call(window, { 
        'type': 'hashchange', 
        'newURL': newHref, 
        'oldURL': _oldHref 
       }); 
      } 
     } 
    }, 100); 
})(); 
// Usage, infinitely many times: 
addHashChange(function(e){alert(e.newURL||location.href);}); 

Answer 2

attachEvent przyjmuje dwa params:

bSuccess = object.attachEvent(sEvent, fpNotify) 

[I jest potrzebny dla wszystkich wersji IE poniżej IE9! :(Zobacz MDN reference ]

ten może pracować.

if(window.addEventListener) { 
    window.addEventListener("hashchange", hashChange, false); 
} 
else if (window.attachEvent) { 
    window.attachEvent("onhashchange", hashchange);//SEE HERE... 
    //missed the on. Fixed thanks to @Robs answer. 
} 

oczywiście jeśli jest to możliwe, należy po prostu użyć jQuery, ponieważ oddaje to wszystkim za

I jak zawsze istnieje plugin tam: http://benalman.com/projects/jquery-hashchange-plugin/