AJax技术

js操作浏览器历史记录的方法

字号+ 作者:H5之家 来源:H5之家 2015-11-04 08:20 我要评论( )

浏览器历史记录的话我们用到不多但看到许多的大站都会有用到,如58就有这个功能了,下面我们来看一篇js操作浏览器历史记录的方法

浏览器历史记录的话我们用到不多但看到许多的大站都会有用到,如58就有这个功能了,下面我们来看一篇js操作浏览器历史记录的方法

html5提供了操作浏览器历史记录的api,pushState方法和replaceState()方法,前者可以添加历史记录,后者可以修改历史记录。

pushState(state,title,url)方法有三个参数;

第一个参数state是一个对象,可以是任何Json字符串。因为firefox会使用用户的硬盘来存取state对象,这个对象的最大存储空间为640k。如果大于这个数 值,则pushState()方法会抛出一个异常。如果确实需要更多的空间来存储,请使用本地存储。

第二个参数title可以忽略,直接传空就行。

第三个参数url是要添加到历史记录的url。

注意的是,执行过这个方法,浏览器的url会变化,同时历史记录会添加,但是页面并不会立即跳转,页面只有在浏览器执行后退或前进操作的时候才会执行刚才添加进去的页面。

另外,有一个事件可以监听浏览器的前进后退,window.onpopstate();

我们可以监听这个事件来达到跳转页面功能。

下面是一个window.open打开的页面可以回退到想要的页面的示例:

1.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   span{text-decoration: underline;cursor: pointer;color: blue;}
  </style>
 </head>
 <body>
  这是1.html页面,点击<span onclick="window.open('2.html')">这里</span>可以跳到2.html页面
 </body>
</html>


2.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  这是2.html页面,通过1.html页面window.open方法打开,默认是不能回退的,现在我们要让它可以回退到1.html页面,请查看下面的js代码
 </body>
 <script type="text/javascript">
  history.pushState({},'','1.html');//向历史记录里添加一条信息,其实在这里的url可以随便填,主要是用了下面的事件跳转
  window.onpopstate = function () { //监听浏览器事件
   location.href = '1.html';
  }
  
 </script>
</html>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Ajax(Asynchronous JavaScript + XML)的定义

    Ajax(Asynchronous JavaScript + XML)的定义

    2016-01-17 17:25

  • Web Essentials之HTML和CSS操作技巧

    Web Essentials之HTML和CSS操作技巧

    2016-01-15 15:31

  • 浏览器脚本系列教程

    浏览器脚本系列教程

    2016-01-15 12:24

  • Jquery Ajax请求文件下载操作失败的原因分析及解决办法

    Jquery Ajax请求文件下载操作失败的原因分析及解决办法

    2015-11-21 14:37

网友点评
y