歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
  一、簡介
 
  HTML5引入了history.pushState()和history.replaceState()方法,它們分別可以添加和修改歷史記錄條目。這些方法通常與window.onpopstate配合使用。
 
  二、pushState()方法的例子
 
  假設在http://mozilla.org/foo.html中執行了以下JavaScript代碼:
 
  varstateObj={foo:"bar"};
 
  history.pushState(stateObj,"page2","bar.html");
 
  這將使瀏覽器地址欄顯示為http://mozilla.org/bar.html,但并不會導致瀏覽器加載bar.html,甚至不會檢查bar.html是否存在。
 
  假設現在用戶又訪問了http://google.com,然后點擊了返回按鈕。此時,地址欄將顯示http://mozilla.org/bar.html,同時頁面會觸發popstate事件,事件對象state中包含了stateObj的一份拷貝。頁面本身與foo.html一樣,盡管其在popstate事件中可能會修改自身的內容。
 
  如果我們再次點擊返回按鈕,頁面URL會變為http://mozilla.org/foo.html,文檔對象document會觸發另外一個popstate事件,這一次的事件對象stateobject為null。這里也一樣,返回并不改變文檔的內容,盡管文檔在接收popstate事件時可能會改變自己的內容,其內容仍與之前的展現一致。
 
  三、pushState()方法
 
  pushState()需要三個參數:一個狀態對象,一個標題(目前被忽略),和(可選的)一個URL.讓我們來解釋下這三個參數詳細內容:
 
  狀態對象—狀態對象state是一個JavaScript對象,通過pushState()創建新的歷史記錄條目。無論什么時候用戶導航到新的狀態,popstate事件就會被觸發,且該事件的state屬性包含該歷史記錄條目狀態對象的副本。
 
  標題—目前忽略這個參數被忽略,但未來可能會用到。傳遞一個空字符串在這里是安全的,而在將來這是不安全的。二選一的話,你可以為跳轉的state傳遞一個短標題。
 
  URL—該參數定義了新的歷史URL記錄。注意,調用pushState()后瀏覽器并不會立即加載這個URL,但可能會在稍后某些情況下加載這個URL,比如在用戶重新打開瀏覽器時。新URL不必須為絕對路徑。如果新URL是相對路徑,那么它將被作為相對于當前URL處理。新URL必須與當前URL同源,否則pushState()會拋出一個異常。該參數是可選的,缺省為當前URL。
 
  四、pushState()方法與設置hash值的區別
 
  在某種意義上,調用pushState()與設置window.location="#foo"類似,二者都會在當前頁面創建并激活新的歷史記錄。但pushState()具有如下幾條優點:
 
  新的URL可以是與當前URL同源的任意URL。而設置window.location僅當你只修改了哈希值時才保持同一個文件。
 
  如果需要,可以不必改變URL就能創建一條歷史記錄。而設置window.location="#foo";,只有在當前哈希不是#foo的情況下,才會創建一個新的歷史記錄項。
 
  我們可以為新的歷史記錄項關聯任意數據。而基于哈希值的方式,則必須將所有相關數據編碼到一個短字符串里。
 
  五、replaceState()方法
 
  history.replaceState()的使用與history.pushState()非常相似,區別在于replaceState()是修改了當前的歷史記錄項而不是新建一個。
 
  六、popstate事件
 
  每當處于激活狀態的歷史記錄條目發生變化時,popstate事件就會在對應window對象上觸發。如果當前處于激活狀態的歷史記錄條目是由history.pushState()方法創建,或者由history.replaceState()方法修改過的,則popstate事件對象的state屬性包含了這個歷史記錄條目的state對象的一個拷貝。
 
  我們也可以直接在history對象上獲取state,如下:
 
  varcurrentState=history.state;
 
  需要注意的是,調用history.pushState()或者history.replaceState()不會觸發popstate事件。opstate事件只會在瀏覽器某些行為下觸發,比如點擊后退、前進按鈕(或者在JavaScript中調用history.back()、history.forward()、history.go()方法)。
 
  七、popstate事件的例子
 
  假如當前網頁地址為http://example.com/example.html,則運行下述代碼后:
 
  window.onpopstate=function(event){
 
  alert("location:"+document.location+",state:"+JSON.stringify(event.state));
 
  };
 
  //綁定事件處理函數.
 
  history.pushState({page:1},"title1","?page=1");//添加并激活一個歷史記錄條目http://example.com/example.html?page=1,條目索引為1
 
  history.pushState({page:2},"title2","?page=2");//添加并激活一個歷史記錄條目http://example.com/example.html?page=2,條目索引為2
 
  history.replaceState({page:3},"title3","?page=3");//修改當前激活的歷史記錄條目http://ex..?page=2變為http://ex..?page=3,條目索引為3
 
  history.back();//彈出"location:http://example.com/example.html?page=1,state:{"page":1}"
 
  history.back();//彈出"location:http://example.com/example.html,state:null
 
  history.go(2);//彈出"location:http://example.com/example.html?page=3,state:{"page":3}
 
  八、pushState()的用途
 
  王二使用pushState()主要是它可以監聽到瀏覽器上的返回事件,這在移動端上也同樣適用,參考如下一段代碼(可以直接運行):
 
  <body>
 
  <p>window.onpopstate可以監聽到返回鍵事件</p>
 
  <script>
 
  history.pushState({},"");
 
  window.onpopstate=function(event){
 
  //這里可以監聽到瀏覽器的返回事件,并做你想做的事情,
 
  //例如:跳轉到另一個網頁
 
  location.href="https://www.baidu.com";
 
  };
 
  </script>
 
  </body>
 
  當然,用window.onhashchange也可以監聽到瀏覽器上的返回事件,參考如下一段代碼(可以直接運行):
 
  <body>
 
  <p>window.onhashchange可以監聽到返回鍵事件</p>
 
  <script>
 
  setTimeout(()=>{
 
  location.hash="a"
 
  },100);
 
  setTimeout(()=>{
 
  window.onhashchange=function(event){
 
  location.href="https://www.baidu.com";
 
  }
 
  },200);
 
  </script>
 
  </body>





本文轉載自中文網

 

如需轉載,請注明文章出處和來源網址:http://www.4389979.live/html/h55047.shtml

河南十一选五大小 山西快乐10分开奖结果 浙江麻将大厅 博易大师配资 皇家马德里欧冠 融资融券股票有哪些 星悦内蒙麻将一口香 秒速时时彩技巧玩法 捕鸟陷阱制作方法大全 深圳福利彩票中心官网 车联网系统收费吗