这篇文章主要介绍”javascript中历史的对象如何使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“javascript中历史的对象如何使用“文章能帮助大家解决问题。
长度的历史。长度属性保存着历史记录的URL数量。初始时,该值为1。由于IE10 +浏览器在初始时返回2,存在兼容性问题,所以该值并不常用
跳转方法
(),返回向前()和()
如果移动的位置超出了访问历史的边界,以上三个方法并不报的错,而是静默失败
[注意]使用历史记录时,页面通常从浏览器缓存之中加载,而不是重新要求服务器发送新的网页。不触发onload
增改记录
HTML5为历史上对象添加了两个新方法,history.pushState()和history.replaceState(),用来在浏览历史中添加和修改记录.state属性用来保存记录对象,而popstate事件用来监听历史对象的变化
[注意]ie9不支持
【pushState ()】
history.pushState()方法向浏览器历史添加了一个状态.pushState()方法带有三个参数:一个状态对象,一个标题(现在被忽略了)以及一个可选的URL地址
历史。pushState(状态、标题、url);
状态对象——状态对象是一个由pushState()方法创建的,与历史纪录相关的javascript对象。当用户定向到一个新的状态时,会触发popstate事件。事件的州属性包含了历史纪录的状态对象。如果不需要这个对象,此处可以填零
标题——新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填零
url,这个参数提供了新历史纪录的地址。新url必须和当前url在同一个域,否则,pushState()将丢出异常。这个参数可选,如果它没有被特别标注,会被设置为文档的当前url
假定当前网址是example.com/1.html,使用pushState方法在浏览记录(历史对象)中添加一个新记录
var stateObj =, {foo:大敌;& # 39;酒吧# 39;,};
history.pushState (stateObj, & # 39; page 2 & # 39;,, & # 39; html 2. # 39;); 添加上面这个新记录后,浏览器地址栏立刻显示example.com/2.html,但并不会跳转到2. html,甚至也不会检查2. html是否存在,它只是成为浏览历史中的最新记录。假如这时访问了google.com,然后点击了倒退按钮,页面的url将显示2. html,但是内容还是原来的html 1.。再点击一次倒退按钮,url将显示1. html,内容不变
总之,pushState方法不会触发页面刷新,只是导致历史对象发生变化,地址栏的显示地址发生变化
如果pushState的url参数,设置了一个新的锚点值(即哈希),并不会触发hashchange事件,,即使新的url和旧的只在散列上有区别
如果设置了一个跨域网址,则会报的错。这样设计的目的是,防止恶意代码让用户以为他们是在另一个网站上
【replaceState ()】
history.replaceState方法的参数与pushState方法一模一样,不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目
假定当前网页是example.com/example.html
history.pushState({页面:1},,& # 39;title 1 & # 39;,, & # 39; ? page=1 & # 39;);
history.pushState({页:,2},& # 39;title 2 & # 39;,, & # 39; ? page=2 & # 39;);
history.replaceState({页:,3},& # 39;title 3 & # 39;,, & # 39; ? page=3 & # 39;);
history.back ()//,url显示为http://example.com/example.html?page=1
history.back ()//,url显示为http://example.com/example.html
history.go (2)//,url显示为http://example.com/example.html?页面=3【状态】
history.state属性返回当前页面的状态对象
history.pushState({页面:1},,& # 39;title 1 & # 39;,, & # 39; ? page=1 & # 39;);
history.state//,{,页面:1,} 【popstate事件】
每当同一个文档的浏览历史(即历史对象)出现变化时,就会触发popstate事件
[注意]需要注意的是,仅仅调用pushState方法或replaceState方法,并不会触发该事件,只有用户点击浏览器倒退按钮和前进按钮,或者使用javascript调用(),(),()方去法时才会触发。另外,该事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件也不会触发
使用的时候,可以为popstate事件指定回调函数。这个回调函数的参数是一个事件事件对象,它的州属性指向pushState和replaceState方法为当前URL所提供的状态对象(即这两个方法的第一个参数)
上面代码中的事件。state，就是通过pushState和replaceState方法，为当前URL绑定的state对象
这个state对象也可以直接通过history对象读取
var currentState = history.state;javascript中历史的对象如何使用
