angularjsinternet-explorer-7browser-historyhashchangejquery-bbq

Angularjs history support for IE6 and IE7


I am using routing in Angularjs for my SPA but I have to support IE7 (and IE8 in IE7 compatibility mode). I want the browser history to still work though. I don't care if I have to use a jQuery plugin.


Solution

  • I checked through the angular source sniffer.js, location.js and browser.js to check the mechanics of how history is working. In essence if the browser supports history (i.e. $sniffer.history is true) then history api is used, else it simply writes to location.href (or locaiton.replace(url)). Check out $browser.url(url, replace) in browser.js, line 149 for details.

    So, if angular is just writing to location then a jquery plugin like Ben Alman's BBQ will pick up this event because it is polling for changes to location.hash. I have successfully got this working in IE8 (in IE7 mode) by simply including Ben's hashchange plugin (a subset of BBQ) and then a minimal event fire and event listening:

    $(function () {
      $(window).hashchange(function() {
        // don't delete this empty handler or ie6/7 history won't work.
      });
      // call hashchange on first load
      $(window).hashchange();
    });
    

    NOTE: jQuery hashchange (and BBQ) is using deprecated $.browser.msie at line 300 so instead use (document.documentMode != undefined) as suggested in the comments to Ben's blog post.