Question

我只是在浏览器本身不支持HTML5历史记录API时，尝试使用modernizer load（yepnope.js）来有条件地加载history.js（通过AJAX）.... / p>

然而，在我对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) {
        ......
      }

}

Answer 1

我发现我使用下面的lib得到了更好的效果（虽然IE8仍然不允许我使用后退和前进浏览器按钮在标签之间）....至少没有JS错误，它适用于我在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");
      }

}

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

1 个答案: