关于HTML5 history API 的介绍

百变鹏仔 6个月前 (10-18) #H5教程

文章标签 history

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 ? alt="关于HTML5 history API 的介绍" >.jpg" id="photo"></p> </body></html>

window.onpopstate方法：

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

本篇文章关于HTML5 history API 的介绍，更多相关内容请关注php中文网。

文章推荐

关于HTML5 history API 的介绍

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集