load history.js via ajax conditionally when browser does not support the HTML5 history API

Question

Hi I'm trying to use modernizer load ( yepnope.js ) to conditionally load history.js (via AJAX) only when the browser does not natively support the HTML5 history API....

However in my tests on IE9/IE8 modernizer appears to load the history.js file successfully (at least I can see the HTTP request in the IE9 developer tools) However i still get an error (unrecognised method) when I try to use history.pushState or History.pushState.... can anyone suggest why this might be?

Modernizr.load([{
//test
test : Modernizr.history,
    //if yes then do nothing as nothing extra needs loading....

    //if no then we need to load the history API via AJAX
nope : ['/js/asm/vendor/history.js'],

complete : function() {

        Tabs.init();

   }


}])

    var Tabs = {

      init: function() {
        this.bindUIfunctions();
        this.pageLoadCorrectTab();
      },

      bindUIfunctions: function() {

      .......

      },

      changeTab: function(hash) {

        var anchor = $("[href='" + hash + "']");
        var div = $(hash);


        function displayTab(anchortab) {

            // activate correct anchor (visually)
            ........
        }
            displayTab(anchor);

        // update history stack adding additional history entries.

        if (typeof history.pushState !== "undefined") {
            // pushState is supported!
            window.history.pushState(null, null,  hash);
        } else {
            //use history API instead
            History.pushState(null, null,  hash);
        }


       //We also need to handle the backstate by telling the brower to trigger the tab behaviour!   
       window.addEventListener("popstate", function(e) {
           anchor = $('[href="' + document.location.hash + '"]');
           if (anchor.length) {
               displayTab(anchor);
           } else {
              defaultAnchor =  $('.transformer-tabs li.active a');
              displayTab(defaultAnchor);
           }
        });

        // Close menu, in case mobile


      },

      // If the page has a hash on load, go to that tab
      pageLoadCorrectTab: function() {
        ......
      },

      toggleMobileMenu: function(event, el) {
        ......
      }

}

Answer 1

I found I got on much better with the following lib (although IE8 still does not allow me to use the back and forward browser button to go between tabs).... at least there are no JS errors and it works for me in IE9 https://github.com/devote/HTML5-History-API

Modernizr.load([{
//test
test : Modernizr.history,
    //if yes then do nothing as nothing extra needs loading....

    //if no then we need to load the history API via AJAX
nope : ['/js/asm/vendor/history.min.js'],

complete : function() {

    var location = window.history.location || window.location;
        Tabs.init();

}

}])

    //responsive tabs API code.
var Tabs = {

      init: function() {
        this.bindUIfunctions();
        this.pageLoadCorrectTab();
      },

      bindUIfunctions: function() {

        // Delegation
        $(document)
          .on("click", ".transformer-tabs a[href^='#']:not('.active')", function(event) {
            Tabs.changeTab(this.hash);
            event.preventDefault();
          })
          .on("click", ".transformer-tabs a.active", function(event) {
            Tabs.toggleMobileMenu(event, this);
            event.preventDefault();
          });

      },

      changeTab: function(hash) {

        var anchor = $("[href='" + hash + "']");

        function displayTab(anchortab) {

            var url = anchortab.attr("href");
            console.log("url" + url);
            var div = $(url);

            // activate correct anchor (visually)
            anchortab.addClass("active").parent().siblings().find("a").removeClass("active");
            // activate correct div (visually)
            div.addClass("active").siblings().removeClass("active");

            anchortab.closest("ul").removeClass("open");
        }
            displayTab(anchor);

        // update history stack adding additional history entries.

            // pushState is supported!
            history.pushState(null, null,  hash);



       //We also need to handle the backstate by telling the brower to trigger the tab behaviour!   
        $(window).on('popstate', function(e) {
           anchor = $('[href="' + document.location.hash + '"]');
           if (anchor.length) {
               displayTab(anchor);
           } else {
              defaultAnchor =  $('.transformer-tabs li.active a');
              displayTab(defaultAnchor);
           }
        });

        // Close menu, in case mobile


      },

      // If the page has a hash on load, go to that tab
      pageLoadCorrectTab: function() {
        this.changeTab(document.location.hash);
      },

      toggleMobileMenu: function(event, el) {
        $(el).closest("ul").toggleClass("open");
      }

}