HTML5：History API

大家在浏览Facebook的相册时有没有发现，页面局部刷新的同时地址栏的地址也改变了，而且不是hash的方式。它使用的就是HTML5 history新增的几个API，作为window的一个全局变量，在HTML4的时代history已不是什么新鲜的事物了。我们经常使用的就有history.back()以及history.go() 。

下面我们来了解下history都有哪些改变。

1. HTML4时代的history API

A) history.length：当前历史列表中的历史记录数（我大概测了下，IE6+是从0开始的，其他的是从1开始的，若有误请反馈哈，^_^）；
B) history.go(n)：前进或后退n条记录，当n=0或空时会刷新当前页；
C) history.back()：后退一步；
D) history.forward()：前进一步;

 

2. HTML5新增的API
A) history.pushState(data, title [, url])：往历史记录堆栈顶部添加一条记录；data会在onpopstate事件触发时作为参数传递过去；title为页面标题，当前所有浏览器都会忽略此参数；url为页面地址，可选，缺省为当前页地址；
B) history.replaceState(data, title [, url]) ：更改当前的历史记录，参数同上；
C) history.state：用于存储以上方法的data数据，不同浏览器的读写权限不一样；
D) window.onpopstate：响应pushState或replaceState的调用；

有了这几个新的API，针对支持的浏览器，我们可以构建用户体验更好的应用了。就像刚提到的Facebook相册，虽然是AJAX的方式，但用户可以直接复制页面地址分享给好友，好友打开看到的就是AJAX加载的数据，做到了书签化。当然这里面需要做的工作远不是说的这么简单。

 

3. 浏览器的兼容性&检测
在HTML5支持不一的时代，新的API总会存在或这或那的兼容性问题。因此我们有必要了解新接口在不同浏览器下的兼容性。



 截图来自:《Manipulating the browser history》

如何检测浏览器是否支持History API？

function supports_history_api() {
    return !!(window.history && history.pushState);
}

 

如何检测history.state的兼容性呢？我尝试赋值history.state=1，但history.state在不同浏览器下的读写权限不一样，所以我们换种方式：

var originalHistoryState = history.state;  // 保存原有的历史信息
history.replaceState(1, null);  // 替换当前历史信息
var stateSupport = history.state == 1;  // 是否存储到刚设置的历史信息
history.replaceState(originalHistoryState, null); // 恢复原来的历史信息

 

4. 安全性
我们看一个例子：DEMO页面在tenpay.com的域名下，用户点击“付款”链接尝试加载另一个域名的某张图片。


可以看到，当我们尝试改变当前地址为一个协议不同、（子）域名不同的地址时，会触发相应的错误。新API在安全性方面作了考虑，所以还是安全的。

5. AJAX Bookmark – AJAX书签化
有了新API的支持，我们可以针对不同浏览器作一些差异化的用户体验。尤其是在AJAX盛行的年代，无历史记录已经是一大诟病。

为了解决AJAX的书签化问题，我们需要解决的主要是以下2个问题：

1. 浏览器对新的HTML5  History API的支持不一；
2. 不支持的浏览器我们如何解决前进/后退的问题 ；
对于问题1，我们采用的是hash方案，这也是很多方案采用的办法了；主要原理这里不细说了，大家可以搜索一下。
下面是我写的解决方案；大家可以参考下，欢迎互相探讨。

github地址：https://github.com/zawaliang/History

6. 一些参考文档

• W3C html5 history：http://www.w3.org/TR/html5/history.html
• Introducing the HTML5 History API：http://dev.opera.com/articles/view/introducing-the-html5-history-api/
• Manipulating the browser history：https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
• Detecting HTML5 Features：http://diveintohtml5.org/detect.html
• window.history：https://developer.mozilla.org/en/DOM/window.history
• window.onpopstate：https://developer.mozilla.org/en/DOM/window.onpopstate
• MooTools onhashchange：http://yearofmoo.com/onhashchange/