您现在的位置是:首页>文章详情

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>

评论

评论插件