如何使用HistoryAPI

（2），Js部分代码

代码如下:

$(function(){
   _init() ;
}) ;
var _history = [] ; // 记录hash的活动数据容器
function _init(){
   var root = $("#list") ;
   var defaultHash = root.find("li a").eq(1).attr("href") ;
   var currentHash = window.location.hash ;
   _addToHistory(defaultHash,true) ;
   if(currentHash && currentHash != defaultHash){
       _showContent((currentHash.split("#")[1])) ;
   }
   else{
       _showContent((defaultHash.split("#")[1])) ;
   }
   $("#list").on("click","a",function(e){
       var action = ($(this).attr("href").split("#")[1]) ;
       _showContent(action) ;
       e.preventDefault() ;
   }) ;
   window.addEventListener("popstate",function(e){
       if(e.state && e.state.hash){
           var hash = e.state.hash ;
           if(_history[1] && hash === _history[1].hash){//存在历史记录，证明是后退事件
               _showContent(hash.split("#")[1].toLowerCase()) ;
           }else{ // 其它认为是非法后退或者前进
               return ;
           }
       }
       else{
           return ;
       }
   },false) ;
} ;
function _showContent(action){
   var samePage = _history[0]["hash"] == "#" + action ;
   if(samePage){ // 同页面,则不重新加载
       return ;
   }
   _loadContent(action + ".data").done(function(data){
       _renderContent(data["content"]) ;
       _addToHistory("#" + action,samePage) ;
   }).fail(function(){
       throw new Error("load content error !") ;
   }) ;  
} ;
function _loadContent(url){
   return $.ajax({
       url : url ,
       dataType : "json"
   }) ;
} ;
function _renderContent(text){
   $("#content-main").text(text) ;
} ;
function _addToHistory(hash,noState){
   var obj = {
       hash : hash
   } ;
   if(noState){
       _history.shift(obj) ;
       window.history.replaceState(obj,"",hash) ;
   }
   else{
        window.history.pushState(obj,"",hash) ;
   }
    _history.unshift(obj) ;
} ;

（四），最后总结

（1），理解History Api的使用方式以及具体实例中使用的目的是为了解决哪些问题。

（2），两个核心Api的不同之处在哪。

（3），测试本例子的注意事项如下。

测试需要搭建一个web服务器，以http://host/的形式去访问才能生效，如果你在本地测试以file://这样的方式在浏览器打开，就会出现如下的问题：

代码如下:

Uncaught SecurityError: A history state object with URL 'file:///C:/xxx/xxx/xxx/xxx.html' cannot be created in a document with origin 'null'.

因为你要pushState的url与当前页面的url必须是同源的，而file://形式打开的页面是没有origin的，所以会报这个错误。

感谢各位的阅读，以上就是“如何使用History API”的内容了，经过本文的学习后，相信大家对如何使用History API这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！