HTML5 history新特性pushState、replaceState及两者的区别


Posted in HTML / CSS onDecember 26, 2015

DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,让你可以在用户的访问记录中前进和后退。

从HTML5开始,我们可以开始操作这个历史记录堆栈。

1.History

使用back(),forward(),和go()方法可以在用户的历史记录中前进和后退

前进和后退

后退:

复制代码
代码如下:

window.history.back();

这个方法会像用户点击了浏览器工具栏上的返回键一样。

同样的,也可以用以下方法产生用户前进行为:

复制代码
代码如下:

window.history.forward();

移动到历史记录中特定的位置

你可以使用go()方法从session历史中载入特定的页面。

向后移动一页:

复制代码
代码如下:

window.history.go(-1);

向前移动一页:

复制代码
代码如下:

window.history.go(1);

类似的,你可以前进或者后退多页。

还可以通过检查浏览器历史记录的length属性来找到历史记录堆栈中的页面总数。

复制代码
代码如下:

var numberOfEntries = window.history.length;

注意:IE支持向go()方法传URL参数。

2.添加和修改history实体

自Gecko2开始引入 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

HTML5引入了histtory.pushState()和history.replaceState()这两个方法,他们允许添加和修改history实体。同时,这些方法会和window.onpostate事件一起工作。

使用history.pushState()方法来修改referrer,这种方法可以被用在经过修改状态后而为xmlhttpRequest对象创建的http header中。这个referrer会是创建XMLHttpRequest 时document的URL。

pushState 用于向 history 添加当前页面的记录,而 replaceState 和 pushState 的用法完全一样,唯一的区别就是它用于修改当前页面在 history 中的记录。

例子

假设http://mozilla.org/foo.html页面执行了一下JS

复制代码
代码如下:

var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html");

这种方法将会使url地址栏显示http://mozilla.org/bar.html,但浏览器不会加载bar.html页面,即使这个页面存在也不会加载。

现在再次假设用户继续访问http://google.com,然后点击后退。这时,url地址栏将会,http://mozilla.org/bar.html,页面会得到popstate事件(chrome),这个状态对象会包含一个stateObj的copy。这个页面看起来像foo.html。+

这时,我们再次点击后退,URL将变成http://mozilla.org/foo.html,document将得到另一个popstate事件和为null的state对象。这次的返回动作并没有改变文档的内容。(也许会过一会尝试加载…chrome)

pushState方法

pushState()有三个参数:state对象,标题(现在是被忽略,未作处理),URL(可选)。具体细节:

· state对象 –state对象是一个JavaScript对象,它关系到由pushState()方法创建出来的新的history实体。用以存储关于你所要插入到历史 记录的条目的相关信息。State对象可以是任何Json字符串。因为firefox会使用用户的硬盘来存取state对象,这个对象的最大存储空间为640k。如果大于这个数 值,则pushState()方法会抛出一个异常。如果确实需要更多的空间来存储,请使用本地存储。

· title—firefox现在回忽略这个参数,虽然它可能将来会被使用上。而现在最安全的使用方式是传一个空字符串,以防止将来的修改。或者可以传一个简短的标题来表示state

· URL—这个参数用来传递新的history实体的URL,注意浏览器将不会在调用pushState()方法后加载这个URL。但也许会过一会尝试加载这个URL。比如在用户重启了浏览器后,新的url可以不是绝对路径。如果是相对路径,那么它会相对于现有的url。新的url必须和现有的url同域,否则pushState()将抛出异常。这个参数是选填的,如果为空,则会被置为document当前的url。

某种意义上来说,调用pushState()方法很像设置了window.location = “#foo”,这两者都会创建和激活另一个关联到当前document的history实体,但pushState()另外有一些优点:

新的url可以是任何和当前url同域的url,相比之下,如果只设置hash,window.location会保持在同一个document。

如果不需要,你可以不修改url。对比而言,设置window.location = “#foo”;仅产生新的history实体,如果你当前的hash不是#foo

你可以将任意的数据与你的新history实体关联。使用基于hash的方法,需要将所有相关的数据编码为一个短字符串。

注意,pushState()方法不会使hashchange时间发生,即使是新旧url只是hash不同。

replaceState()方法

history.replaceState() 用起来很像pushState(),除了replaceState()是用来修改当前的history实体而不是创建一个新的。这个方法有时会很有用,当 你需要对某些用户行为作反应而更新一个state对象或者当前history实体时,可以使用它来更新state对象或者当前history实体的url。

popstate事件

当history实体被改变时,popstate事件将会发生。如果history实体是有pushState和replaceState方法产生的,popstate事件的state属性会包含一份来自history实体的state对象的拷贝

详见window.onpopstate

读取当前的state

读取现有state

当页面加载时,它可能会有一个非空的state对象。这可能发生在当页面设置一个state对象(使用pushState或者replaceState)之后用户重启了浏览器。当页面重新加载,页面将收到onload事件,但不会有popstate事件。然而,如果你读取history.state属性,将在popstate事件发生后得到这个state对象
var currentState = history.state;
Browsers: Tested and Working In

HTML5 Browsers

Chrome 8,9,10
Firefox 4
Safari 5
Opera 11
Safari iOS 4.3
HTML4 Browsers

IE6,7,8,9
Firefox 3
Opera 10
Safari 4
Safari iOS prior to version 4.3

pushState与replaceState区别

history.pushState(state, title, url)

--------------------------------------------------------------------------------

将当前URL和history.state加入到history中,并用新的state和URL替换当前。不会造成页面刷新。

state:与要跳转到的URL对应的状态信息。

title:可以不传

url:要跳转到的URL地址,不能跨域。

history.replaceState(state, title, url)

--------------------------------------------------------------------------------

用新的state和URL替换当前。不会造成页面刷新。

state:与要跳转到的URL对应的状态信息。

title:可以不传

url:要跳转到的URL地址,不能跨域。

--------------------------------------------------------------------------------

两者看似没有区别,其实区别很大的,pushState是添加历史记录的,而replaceState是不添加的。

HTML / CSS 相关文章推荐
CSS3 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
CSS3教程(1):什么是CSS3
Apr 02 HTML / CSS
使用css3实现的windows8开机加载动画
Dec 09 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
X/HTML5 和 XHTML2
Oct 17 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 #HTML / CSS
Html5大文件断点续传实现方法
Dec 05 #HTML / CSS
HTML5有哪些新特征
Dec 01 #HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 #HTML / CSS
深入浅析HTML5中的SVG
Nov 27 #HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 #HTML / CSS
HTML5标签使用方法详解
Nov 27 #HTML / CSS
You might like
PHP mysql事务问题实例分析
2016/01/18 PHP
PHP基于单例模式编写PDO类的方法
2016/09/13 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
Python查看微信撤回消息代码
2018/06/07 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
中学生学习生活的自我评价
2013/10/26 职场文书
技术总监个人的自我评价范文
2013/12/18 职场文书
大学生村官心得体会范文
2014/01/04 职场文书
2014年入党积极分子党课学习心得体会模板
2014/04/03 职场文书
社区禁毒工作方案
2014/06/02 职场文书
任命书范本大全
2014/06/06 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
2015年公司工作总结
2015/04/25 职场文书
我的中国梦主题班会
2015/08/14 职场文书
初一语文教学反思
2016/03/03 职场文书