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