大家在浏览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的域名下,用户点击“付款”链接尝试加载另一个域名的某张图片。

HTML5 History API安全性

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

5. AJAX Bookmark – AJAX书签化

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

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

  1. 1. 浏览器对新的HTML5  History API的支持不一;
  2. 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/