Ottieni l'evento di hashchange per funzionare su tutti i browser (incluso IE7)

Question

Ho un codice (scritto da un altro sviluppatore) che sta caricando la pagina AJAX all'interno di WordPress (ad esempio non ricarica pagina) quando fai clic su un oggetto nav, AJAX si aggiorna l'area del contenuto principale. Il mio problema è che è rotto in IE7 e non ho idea di dove cominciare in termini di debug.

Le linee di apertura originali erano

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; 

Ma li cambiate per rendere il addEventListener condizione in base se tale metodo fosse presente o meno. Alcune ricerche mi hanno detto che il metodo non è disponibile nelle versioni precedenti di IE (ad esempio 7 nel mio caso). Inoltre, la console di debug di IE7 lo identificava come un metodo non disponibile, quindi è abbastanza chiaro. Ho riscritto le linee come segue, ma il codice non viene ancora lavorando:

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; 

Lo script originale completo può essere visualizzato in questo pastebin: http://pastebin.com/Jc9ySvrb

Answer 1

• attachEvent richiede eventi per essere preceduto da on.
• Hai diverse maiuscole per il metodo. Cambia hashchange in attachEvent a hashChange per far funzionare l'evento in IE8.
• Utilizzare l'implementazione suggerita per supportare l'implementazione hashchange per IE7- e altri browser vecchi.

Ho creato un applicazione cross-browser, che aggiunge la funzione hashchange ai browser, anche quelli che lo fanno not support esso. Il fallback è basato su 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);  
} 

Nota: Questo codice è utile per evento di un hashchange. Se si desidera aggiungere più hashchange gestori, utilizzare il seguente metodo.
Definisce due funzioni, addHashChange e removeHashChange. Entrambi i metodi hanno una funzione come argomento.

(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 assume due params:

bSuccess = object.attachEvent(sEvent, fpNotify) 

[ed è necessario per tutte le versioni di IE sotto IE9! :(Vedi MDN reference ]

Questo potrebbe funzionare:.

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. 
} 

Naturalmente, se è possibile, si deve solo utilizzare jQuery, dal momento che racchiude tutto questo per il vostro

E come sempre non c'è un plugin là fuori: http://benalman.com/projects/jquery-hashchange-plugin/