Javascript 当浏览器不支持HTML5历史API时,有条件地通过ajax加载history.js

Javascript 当浏览器不支持HTML5历史API时,有条件地通过ajax加载history.js,javascript,modernizr,history.js,html5-history,Javascript,Modernizr,History.js,Html5 History,嗨,我正在尝试使用modernizer load,仅当浏览器本机不支持HTML5历史API时,才通过AJAX有条件地加载 然而,在我对IE9/IE8的测试中,modernizer似乎成功加载了history.js文件,至少我可以在IE9开发者工具中看到HTTP请求,但是当我尝试使用history.pushState或history.pushState时,我仍然得到一个无法识别的错误方法。。。。有人能解释为什么会这样吗 Modernizr.load([{ //test test : Moderni

嗨,我正在尝试使用modernizer load,仅当浏览器本机不支持HTML5历史API时,才通过AJAX有条件地加载

然而,在我对IE9/IE8的测试中,modernizer似乎成功加载了history.js文件,至少我可以在IE9开发者工具中看到HTTP请求,但是当我尝试使用history.pushState或history.pushState时,我仍然得到一个无法识别的错误方法。。。。有人能解释为什么会这样吗

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

}

虽然IE8仍然不允许我使用“后退”和“前进”浏览器按钮在选项卡之间切换,但我发现我在使用以下库时感觉好多了。。。。至少没有JS错误,它在IE9中对我有效

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");
      }

}