操作浏览器历史记录pushState

版权声明:本文为博主原创文章,未经博主允许不得转载。

 

前言

我们都知道window的history方法可以操作浏览器的历史记录,go(),back(),等等,这样我们可以自己模拟按钮去实现相应的前进后退操作,但是当我们想操作浏览器的返回按钮就犯难了,现在H5给我们提供了这一操作,我们这就来看一下。

pushState 方法

pushState()有三个参数:一个状态对象、一个标题(现在会被忽略),一个可选的URL地址。下面来单独考察这三个参数的细节:

  1. 状态对象(state object) — 一个JavaScript对象,与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态,popstate事件都会被触发,并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。任何可序列化的对象都可以被当做状态对象。因为FireFox浏览器会把状态对象保存到用户的硬盘,这样它们就能在用户重启浏览器之后被还原,我们强行限制状态对象的大小为640k。如果你向pushState()方法传递了一个超过该限额的状态对象,该方法会抛出异常。如果你需要存储很大的数据,建议使用sessionStorage或localStorage。

  2. 标题(title) — FireFox浏览器目前会忽略该参数,虽然以后可能会用上。考虑到未来可能会对该方法进行修改,传一个空字符串会比较安全。或者,你也可以传入一个简短的标题,标明将要进入的状态。

  3. 地址(URL) — 新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址,但之后,可能会试图加载,例如用户重启浏览器。新的URL不一定是绝对路径;如果是相对路径,它将以当前URL为基准;传入的URL与当前URL应该是同源的,否则,pushState()会抛出异常。该参数是可选的;不指定的话则为文档当前URL。

1
2
3
4
var stateObj = {
foo: "bar"
};
history.pushState(stateObj, "title", "url");

第一个参数,state默认为null,传入的是一个对象,目前我还没发现传入的值有什么要求,好像改变就可以,不需要有特别的值的要求。
第二个参数,title传空即可。
第三个参数,新的历史记录条目当进入页面后,调用该方法,例如我访问的是demo.html,传入demo2.html 此时页面访问的是demo.html,但是url地址栏显示的却是demo2.html;

这样操作会多出一条历史记录,也就是说访问下一页的时候,返回到当前会有两个页面,一个就是你的方法传入的url参数,一个就是当前的页面;

replaceState()方法

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

当你为了响应用户的某些操作,而要更新当前历史记录条目的状态对象或URL时,使用replaceState()方法会特别合适。

popstatus 方法

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

1
2
3
window.onpopstate = function(){
window.location.href = "http://www.google.com"
}

当历史记录状态发生变化时会触发该事件,一个简单的例子,A->B->C 这是一个支付跳转页面 当到达D页面按返回正常是返回C页面的,这时我们就可以去操作history,状态改变返回首页~

总结

可能正常情况不太会用得到,但在一些特殊的情况还是很有用的方法。