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>

时间: 2024-11-08 20:24:49

js操作浏览器历史记录的方法的相关文章

JS 操作Array数组的方法及属性实例

 本篇文章主要是对JS操作Array数组的方法及属性进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 本文总结了Array数组的3个属性,length 属性.prototype 属性.constructor 属性使用,并附注数组对象的8个分类及多个方法使用,具体如下:   对象的3个属性 1.length 属性   length 属性 Length属性表示数组的长度,即其中元素的个数.因为数组的索引总是由0开始,所以一个数组的上下限分别是:0和length-1.和其他大多数不同的是

JS操作HTML自定义属性的方法

 这篇文章主要介绍了JS操作HTML自定义属性的方法,以实例形式分析了html中自定义属性的设置与对应的javascript操作技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了JS操作HTML自定义属性的方法.分享给大家供大家参考.具体如下: HTML代码如下(其中的displayName为自定义属性): 代码如下: <input type="text" id="txtBox" displayName="123456"

JS操作HTML自定义属性的方法_javascript技巧

本文实例讲述了JS操作HTML自定义属性的方法.分享给大家供大家参考.具体如下: HTML代码如下(其中的displayName为自定义属性): 复制代码 代码如下: <input type="text" id="txtBox" displayName="123456" /> 获取自定义属性值: 复制代码 代码如下: document.getElementById("txtBox").getAttribute(&q

JS判断浏览器类型的方法总结

各类浏览器在JS的navigator.userAgent.toLowerCase()中显示结果  代码如下 复制代码 1 火狐 mozilla/5.0 (windows; u; windows nt 5.1; zh-cn; rv:1.9.0.10) gecko/2009042316 firefox/3.0.10 qqdownload/1.7 2 IE8 mozilla/4.0 (compatible; msie 8.0; windows nt 5.1; trident/4.0; .net clr

js操作iframe的一些方法介绍

1. 获得iframe的window对象存在跨域访问限制. chrome:iframeElement. contentWindow firefox: iframeElement.contentWindow ie6:iframeElement.contentWindow 文章Iframes, onload, and document.domain中说"he iframe element object has a property called contentDocument that contai

js操作iframe的一些方法介绍_javascript技巧

1. 获得iframe的window对象存在跨域访问限制. chrome:iframeElement. contentWindowfirefox: iframeElement.contentWindowie6:iframeElement.contentWindow 文章Iframes, onload, and document.domain中说"he iframe element object has a property called contentDocument that contains

js判断浏览器类型的方法_javascript技巧

代码如下: 复制代码 代码如下: var isIE=!!window.ActiveXObject; var isIE6=isIE&&!window.XMLHttpRequest; var isIE8=isIE&&!!document.documentMode; var isIE7=isIE&&!isIE6&&!isIE8; if (isIE){     if (isIE6){         alert("ie6″);     }e

JS 操作Array数组的方法及属性实例解析_javascript技巧

本文总结了Array数组的3个属性,length 属性.prototype 属性.constructor 属性使用,并附注数组对象的8个分类及多个方法使用,具体如下: 对象的3个属性1.length 属性 length 属性Length属性表示数组的长度,即其中元素的个数.因为数组的索引总是由0开始,所以一个数组的上下限分别是:0和length-1.和其他大多数不同的是,JavaScript数组的length属性是可变的,这一点需要特别注意.当length属性被设置得更大时,整个数组的状态事实上

js操作滚动条事件实例_javascript技巧

本文实例讲述了js操作滚动条事件的方法.分享给大家供大家参考.具体分析如下: 之前一直很纳闷,如何监视滚动条的事件,今天终于有点明白了. 下边代码,是监听滚动条只要移动,下方的返回顶部的div显示与隐藏的代码 window.onscroll = function () { var t = document.documentElement.scrollTop || document.body.scrollTop; if (t > 0) { $(".cbbfixed").css(&q