當瀏覽器不支持HTML5歷史API時有條件地加載history.js

Question

嗨我想使用modernizer加載（yepnope.js）有條件地加載history.js（通過AJAX）只有當瀏覽器本身不支持HTML5的歷史API ....

然而，在我對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"); 
     } 

}