关于HTML5 history API 的介绍

history是个html' target='_blank'>全局变量，即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[ id ])? $_GET[ id ] : 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 = test + c; //更改title window.history.pushState({ title : test +c, photo :c}, test +c, test.php?id= +c); // 插入前一页历史记录 window.history.replaceState({ title : test +c, photo :c}, test +c, test.php?id= +c); // 更改当前历史记录 document.getElementById( photo ).src = c + .jpg  window.onpopstate = function(obj){ if(obj.state!=null){ document.title = obj.state.title; // 后退时更新title document.getElementById( photo ).src = obj.state.photo + .jpg  /script  /head  body  a href= javascript:void(0) quot;go(1) page 1 /a  a href= javascript:void(0) quot;go(2) page 2 /a  a href= javascript:void(0) quot;go(3) page 3 /a  a href= javascript:void(0) quot;go(4) page 4 /a  p img src= ?=$photo ? .jpg id= photo /p  /body  /html 

window.onpopstate方法：

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

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

相关推荐：

关于冒泡，二分法插入，快速排序算法的介绍

讲解php 支持断点续传的文件下载类的相关内容

如何通过php 过滤html标记属性类

以上就是关于HTML5 history API 的介绍的详细内容，其它编程语言

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。