H5中的history方法Api介紹

　　最近公司在做一個微信公眾號，看了項目源碼，看到項目中用到了history的Api來進行控制瀏覽器的歷史記錄及前進/后退鍵；

　　下面來跟大家一起來捋捋history的Api方法和使用：

　　history.pushState(data,title,url)：在瀏覽器中新增一條歷史記錄；

　　data會在onpopstate事件觸發時作為參數傳遞過去，title為頁面標題，url為頁面地址；

　  history.replaceState(data,title,url)：在瀏覽器中替換當前歷史記錄；

　　data會在onpopstate事件觸發時作為參數傳遞過去，title為頁面標題，url為頁面地址；

　  history.length()：當前歷史列表中的歷史記錄條數；

      window.onpopstate：實際上popstate是一個瀏覽器內置的點擊事件，響應pushState和replaceState的觸發調用；

　　

    //當頁面加載時   
     window.onload=function(){
        pushHistory();
    //新增瀏覽器事件監聽(popstate為事件名，觸發事件執行function)
      window.addEventListener("popstate",function(e){
          //括號里面應為業務代碼(要做的事情)   
        },false);
      function pushHistory(){
　　　　//定義對象
        var state={
           title:“title”,
           url:"#"
          };
　　　　//調用history.pushState方法往瀏覽器歷史記錄上新增一條歷史記錄
       window.history.pushState(state,"title","#");
        }        
    }    

　　history.back(-1):返回到當前頁的上一頁(原頁面表單中的內容會保留)

　  history.back(0):頁面刷新

     history.back(1):當前頁前進一頁

     history.go(-1): 返回到當前頁的上一頁(原頁面表單中的內容會丟失，效果基本和history.back(-1)一樣)

     history.forward():當前頁面前進一頁(和history.back(1)效果一樣)

 

　　聲名：history方法可以直接調用，例：history.pushState()，也可以用window.history.pushState()來調用。因為history是屬於瀏覽器中的子對象，兩種調用方法都是生效的；