好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

关于HTML5 history API 的介绍

HT ML 5 history API介绍

history是个全局变量,即window.history

属性和方法如下:

length :历史堆栈中的记录数。

back() : 返回上一页。

foward() : 前进到下一页。

go([delta]) : delta是数字,如果为0或为空则刷新本页,如果 正数 则前进[delta]页,如负数则后退[delta]页。


HTML5添加了以下两个方法:

push stat e(data, t IT le, [,url]) :在历史堆栈顶部插入一条记录。

data为一个对象或null,会在window的popstate事件(window.onpopstate)时,作为state参数传递过去。

title为页面的标题,当前所有浏览器都忽略这个参数。

url 为页面url,不写则为当前页。
replaceState(data, title, [,url]) :更改当前页面的 历史记录 。这种更改不会去访问该URL。
replaceState()的URL参数必须和当前页的协议(如HTTP、HTTPS)和域名完全相同(使用不同的子域都不行)
目前只有Safari 5.0+、Ch rom e 8.0+、Firefox 4.0+和iOS 4.2.1+支持。如果想兼容老浏览器的话,可以试试History.js,而且它还修正了一些bug。
pushState 与 replaceState 使用:

<?php
    $photo = isset( $_GET [& # 39;id'])? $_GET['id'] : 1;
?>
<!DOCTY PE  HTML P ub LIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://HdhCmsTestw3. org /TR/html4/loose.dtd">
<html>
 <head>
  < ;m eta http-equiv="content -t ype" 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>
  <p>
      <a  hr ef="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 支持断点续传的文件下载类的相关内容

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

以上就是关于HTML5 history API 的介绍的详细内容,更多请关注其它相关文章!

总结

以上是 为你收集整理的 关于HTML5 history API 的介绍 全部内容,希望文章能够帮你解决 关于HTML5 history API 的介绍 所遇到的问题。

如果觉得 网站内容还不错, 推荐好友。

查看更多关于关于HTML5 history API 的介绍的详细内容...

  阅读:15次