HTML5的History API介绍

HTML5的History API介绍

既实现了局部刷新,又修改了浏览器地址,并却做到了前进后推的效果

这其实是HTML5 History API实现的效果 其技术叫 pjax : pushState + ajax 

 而在JavaScript MVC开始流行之后，通过刷新来修改URL的方法，不禁让人感到烦躁。
然而HTML5中就制定了一个这样的API，可以通过方法的方式来修改URL，而又不会使浏览器刷新，就是History AP 

 FF5发布会的时候,FF的工程师展示了一种HTML5的新技术,特别的提及了Github所采作用这种技术.
十分的友好,个人认为是完美解决了Ajax对搜索引擎不友好 这个万恶的问题 

在HTML4的时代history已不是什么新鲜的事物了。

我们经常使用的就有 history.back()以及history.go() 。

为什么要使用History API

在AJAX给我们带来提高用户体验、减少HTTP连接数等好处的同时，也渐渐显露出一些不足之处，比如：

1. 无法使用浏览器的前进、后退来切换前后数据。
2. 当我们将浏览器地址栏中的链接与朋友分享时，可能实际上却并非我们期望的内容。
3. 单纯地使用AJAX不利于搜索引擎优化。

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; // 是否存储到刚设置的历史信息

//stateSupport true的话支持，false不支持

history.replaceState(originalHistoryState, null); // 恢复原来的历史信息

 

 

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


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

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

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

1. 浏览器对新的HTML5  History API的支持不一； //用hash的问题解决
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/

• *参考文献
  MSD window.histor: https://developer.mozilla.org/en/dom/window.history
  Pjax: https://github.com/defunkt/jquery-pjax

  *推荐资源
  Github的js: http://db.tt/B0Q0Yb8
  Pjax源码: https://github.com/defunkt/jquery-pjax/blob/master/jquery.pjax.js

  +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

  不错的例子，http://uloli.com/p/htdl9/  http://doneta.org/eyun/

  https://github.com/devote/HTML5-History-API#english