HTML5 history新特性pushState、replaceState

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()另外有一些优点:

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

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

l 你可以将任意的数据与你的新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对象(使用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

 

 

转自:http://zhanchaojiang.iteye.com/blog/1462994

 

https://developer.mozilla.org/en-US/docs/Web/API/History_API

 

http://www.cnblogs.com/flash3d/archive/2013/10/23/3384823.html

 

时间: 2024-10-14 05:31:55

HTML5 history新特性pushState、replaceState的相关文章

开发者必须知道的HTML5十五大新特性

HTML5想必大家都很熟悉了,因为太多的媒体在讨论这一技术.然而,你能准确地说出HTML5带来了哪些新特性吗?本文总结了HTML5带来的15项你必须知道的新特性. 一起来看下: 1.新的文档类型 (New Doctype) 目前许多网页还在使用XHTML 1.0 并且要在第一行像这样声明文档类型: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

三个不常见的HTML5 实用新特性简介

 都已经到了 2014 年了,再来说 HTML5 的新特性,实在是够晚了,不过这几个在介绍 HTML5 的书上很少见到,但又可以方便的应用在自己的网站上,所以特地来介绍一下 一.DNS 预解析缓存   众所周知,解析 DNS 是网站性能优化的比较重要的一部分,虽然加载时间不太长,但是很难压缩起来.特别是为了并发下载资源而使用多个 CDN 域名来加载资源的大型网站,更不可忽视,每加载资源之前都要先进行 CDN 域名的 DNS 解析转换. 如果采用 DNS 预加载,支持该功能的浏览器就会提前对该域名

必须知道的HTML5的新特性,技巧以及技术

总结一下: 1. 新的Doctype 尽管使用<!DOCTYPE html>,即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用<figure>和<figcaption>来语义化地表示带标题的图片 <figure> <img src="path/to/image" alt="About image" /> <figcaption> <p>This is an im

三个不常见的 HTML5 实用新特性简介_经验交流

一.DNS 预解析缓存 众所周知,解析 DNS 是网站性能优化的比较重要的一部分,虽然加载时间不太长,但是很难压缩起来.特别是为了并发下载资源而使用多个 CDN 域名来加载资源的大型网站,更不可忽视,每加载资源之前都要先进行 CDN 域名的 DNS 解析转换.如果采用 DNS 预加载,支持该功能的浏览器就会提前对该域名进行 DNS 解析并且缓存一下,而不会在需要请求资源再进行解析.而且这个功能应用实在是太简单: 复制代码 代码如下: <link rel="dns-prefetch"

HTML5 &amp; CSS3初学者指南(3) – HTML5新特性

介绍 本文介绍了 HTML5 的一些新特性.主要包含以下几个方面: Web 存储 地理位置 拖放 服务器发送事件   Web存储 HTML5 Web 存储的设计与构想是一个更好的机制来存储客户端的网络数据.它是通过一个网络浏览器作为客户端数据库实现的,它允许网页以键值对的形式来存储数据. 它具有以下特征: 每个原始网站/域最多可存储 5MB 的数据. 你可以通过属性和方法来使用 JavaScript 操作 web 存储器中的数据实现访问. 就像 cookies,你可以选择将保持数据(维持),即使

HTML5和CSS3特性检测

 HTML5和CSS3逐渐成为WEB前端开发的必须技能,开发过程中检查不同浏览器对HTML5和CSS3支持情况成了是一件非常烦心的事情. 比如我们要检查某个浏览器是否支持canvas元素: function SUP_canvas() { var elem = document.createElement('canvas'); return !!(elem.getContext &amp;amp;amp;amp;&amp;amp;amp;amp; elem.getContext('2d'))

webstorage-HTML5的新特性Localstorage有什么特别的用途?

问题描述 HTML5的新特性Localstorage有什么特别的用途? HTML5引进了很多新特性,其中Localstorage很有意思.但是我觉得localstorage就是比cookie能存储的内容多了一些,没有什么其他优点,而且还有很多浏览器不兼容. 我的问题是: 如何解决localstorage在低端浏览器下的兼容性问题. 有什么场景是localstorage特别擅长的吗?比cookie适合? 解决方案 HTML5本地存储优于cookie的一点就是不需要网络传输.cookie每次请求被发

JavaScript检测是否支持CSS3、HTML5新特性的例子

伴随着今年10月底HTML5标准版的发布,未来使用H5的场景会越来越多,这是令web开发者欢欣鼓舞的事情.然而有一个现实我们不得不看清,那就是IE系列浏览器还占有一大部分市场份额,以IE8.9为主,windows8.1的用户已经用上了IE10/11,而考虑我国的国情,IE6.7依然存留不少.在我们放手用HTML5开发的时候,新特性支持度检测就是必不可少的了.一种方式是用navigator.userAgent或navigator.appName来检测浏览器类型和版本,不过这种方式不是很可靠,浏览器

IE10对CSS3新特性的支持和HTML5新特性的支持

文章简介:IE10将增强对HTML5和CSS3的支持. Windows 8 终于发布了,虽然现在可用的只是开发者预览版,好消息是,IE 10 也随着发了,虽然现在还只有Windows 8可用.我们来看下IE10都有哪些新特性吧. IE开发者中心给到了一份详细的针对前端开发者的文档,列出了IE10支持的HTML5和CSS3新特性.嗯,它终于跟上了: CSS3 css region css3多列 Flexbox grid 定位浮动(positioned float) 3D变换(3D transfro