關於HTML5 history API 的介紹-H5教程-PHP中文網

關於HTML5 history API 的介紹

jacklove

發布： 2018-06-11 10:08:53

原創

1919 人瀏覽過

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中文網。

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

關於HTML5 history API 的介紹