首頁 > 文章 > web前端 > 關於HTML5 history API 的介紹

關於HTML5 history API 的介紹

jacklove原創: 2018-06-11 10:08:531930瀏覽

HTML5 history API介紹

history是個全域變量，即window.history

#屬性與方法如下：

length：歷史堆疊中的記錄數。

back()：回上上一頁。

foward()：前進到下一頁。

go([delta])： delta是數字，如果為0或為空則刷新本頁，如果正數則前進[delta]頁，如負數則後退[delta]頁。

HTML5加入了以下兩個方法：

#pushState(data, title, [,url ])：在歷史堆疊頂端插入一筆記錄。

data為物件或null，會在window的popstate事件(window.onpopstate)時，會作為state參數傳遞過去。

title為頁面的標題，目前所有瀏覽器都忽略這個參數。

url 為頁面url，不寫則為目前頁。
replaceState(data, title, [,url])：更改目前頁面的歷史記錄。這種更改不會去訪問該URL。
replaceState()的URL參數必須和目前頁的協定（如HTTP、HTTPS）和網域完全相同（使用不同的子網域都不行）
目前只有Safari 5.0 、Chrome 8.0 、Firefox 4.0 和iOS 4.2.1 支援。如果想要相容舊瀏覽器的話，可以試試History.js，它也修正了一些bug。
pushState 與replaceState 使用：

<?php
    $photo = isset($_GET[&#39;id&#39;])? $_GET[&#39;id&#39;] : 1;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>test</title>
  <script type="text/javascript">
  function go(c){
    document.title = &#39;test&#39; + c; //更改title
    window.history.pushState({&#39;title&#39;:&#39;test&#39;+c, &#39;photo&#39;:c}, &#39;test&#39;+c, &#39;test.php?id=&#39;+c); // 插入前一页历史记录
    window.history.replaceState({&#39;title&#39;:&#39;test&#39;+c, &#39;photo&#39;:c},&#39;test&#39;+c, &#39;test.php?id=&#39;+c);  // 更改当前历史记录
    document.getElementById("photo").src = c + &#39;.jpg&#39;;
  }
  window.onpopstate = function(obj){
    if(obj.state!=null){
        document.title = obj.state.title;  // 后退时更新title
        document.getElementById("photo").src = obj.state.photo + &#39;.jpg&#39;;
    }
  }
  </script>
 </head>
 <body>
  <p>
      <a href="javascript:void(0)" onclick="go(1)">page 1</a>
      <a href="javascript:void(0)" onclick="go(2)">page 2</a>
      <a href="javascript:void(0)" onclick="go(3)">page 3</a>
      <a href="javascript:void(0)" onclick="go(4)">page 4</a>
  </p>
  <p><img src="<?=$photo ?>.jpg" id="photo"></p>
 </body>
</html>

window.onpopstate方法：

window.onpopstate = function(event){
    alert(event.state);
}

本篇文章關於HTML5 history API 的介紹，更多相關內容請關注php中文網。

關於HTML5 history API 的介紹

相關文章