操纵浏览器历史记录--popstate() && history.pushState()

一、历史记录前进与后退

1.后退:

window.history.back()--相当于用户在浏览器的工具栏上点击返回按钮;

2.前进:

window.history.forward()--相当于用户在浏览器的工具栏上点击前进按钮;

3.移动到指定历史记录点:

通过go()方法,指定一个相对于当前页面位置的数值,从当前会话的历史记录中加载页面(当前位置页面索引:0,上一页:-1,下一页:1);

window.history.go(-2)--后退2页,相当于调用两次back();

window.history.go(1)--前进1页,相当于调用forward();

*可以通过window.history.length,得到历史记录栈中一共有多少页。

二、添加/修改历史记录条目

1.pushState(stateObject,title,URL):

逐条添加历史记录条目,

a.状态对象(stateObject)--一个JavaScript对象,与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态,popstate事件都会被触发,并且事件对象的state属性都包含历史记录条目的状态对象的拷贝;(ps:FireFox浏览器强行限制状态对象的大小为640k,超出则抛异常,可通过sessionStorage或localStorage存储大的数据)

b.标题(title)--传入一个简短的标题,标明将要进入的状态;(FireFox浏览器目前会忽略该参数,但是传一个空字符串会比较安全)

c.地址(URL)--新的历史记录条目的地址(可选,不指定的话则为文档当前URL);浏览器不会在调用pushState()方法后加载该地址;传入的URL与当前URL应该是同源的,否则,pushState()会抛出异常。

*某种意义上,调用pushState()有点类似于设置window.location='#foo',它们都会在当前文档内创建和激活新的历史记录条目。

(拓展:window.location--待研究)

2.replaceState():

history.replaceState()操作类似于history.pushState(),不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。

3.popstate():

每当激活的历史记录发生变化时,都会触发popstate事件。如果被激活的历史记录条目是由pushState所创建,或是被replaceState方法影响到的,popstate事件的状态属性将包含历史记录的状态对象的一个拷贝。

读取当前状态:

如果页面中使用pushState()或replaceState()方法设置了一个状态对象,然后用户重启了浏览器。当页面重新加载时,页面会触发onload事件,但不会触发popstate事件。可以使用history.state直接读取当前历史记录条目的状态,而不需要等待popstate事件

调用history.pushState()或者history.replaceState()不会触发popstate事件.pushState事件只会在其他浏览器操作时触发, 比如点击后退按钮(或者在JavaScript中调用history.back()方法)。

调用方法:

window.onpopstate = function(event) {
//做一些操作 event.state;
// 当前历史记录条目的状态 };

    或者:

window.addEventListener('popstate', function(event) {
  //做一些操作
});

(拓展:EventTarget.addEventListener() 方法将指定的事件监听器注册到EventTarget上,当该对象触发指定的事件时,指定的回调函数就会被执行。--EventTarget待研究)

                                                                --资料来源MDN

posted @ 2016-08-20 11:08  差不多是条咸鱼了  阅读(8739)  评论(0编辑  收藏  举报