大家在浏览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. 一些参考文档
分享到:
相关推荐
connect-history-api-fallback, 返回到使用 HTML 5历史记录API的应用程序的回退到 index.html connect-history-api-fallback通过指定索引页面向代理请求请求中间件,这对于使用HTML5历史API的单页应用程序。...
前端项目-html5-history-api,不支持pushstate、replaceState的浏览器的HTML5历史API扩展
history-server:一个用于单页应用的 HTTP服务器使用HTML5 history API实现
可以完全按照例如Dive Into HTML5书( )或History API规范( )中的描述使用该库 )。 您可以使用以下命令安装此插件: npm install html5-history-api 浏览器支持: history.js -IE8 +和其他浏览器 history....
主要介绍了深入探究HTML5的History API,重点讲述了HTML5中新的方法history.pushState()和history.replaceState(),需要的朋友可以参考下
“HistoryAPI:滚动恢复”的Polyfill_HTML_JavaScript_下载.zip
系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美驾驭O(∩_∩)O~,
HistoryLocation是包装 HTML5 历史 API。 // ececute http://example.com/ import { HashLocation } from 'common-history' ; const hashLocation = new HashLocation ( ) ; // It is executed each time the ...
尽管也存在一些,但由于您只能使用本机HTML5 History API,因此它们相对较小。 如果您打算支持旧版浏览器,那么可以使用History.js。 该通知位于此处,因为History.js没有获得足够的资金来维护,因此它仅在旧版...
观看此效果可以猛击此处:GitHub或阅FM),回顾了所学的前端知识,似乎没有任何技术可以实现这一点,于是百度了一下,才发现这原来是使用HTML5中History API实现的效果,但奈何一直未曾派上用场。直到博客改版时,才...
HTML5 历史 API 管理器现代浏览器支持使用 JavaScript 更新浏览器 URL 并将状态数据与更新后的 URL 关联的功能。 此实用程序旨在满足本机 API 中的几个差距。 定义在调用 pushState 和触发 onpopstate 事件时执行的...
HTML5历史记录示例来自示例,适用于node。 $ git clone https://github.com/nichoth/history-example.git$ cd history-example$ npm install$ npm run build$ node server.jsCheckout 使用特殊的请求标头,因此...
使用 html5 历史/状态 api[pop,push]。 示例: -->> 页面的 URL 是 。 --> 在 javascript 中调用这一行 historyStoreObj.push(function(){console.log("Back to homepage");},"page1"); -->> 页面的 ...
5 The History API: Changing the game for MVC sites 118 6 Geolocation and web mapping 147 7 Web workers and drag and drop 185 8 Websockets 214 9 Local storage and state management 248 10 Offline web ...
一个zepto插件,利用HTML5 History API实现的路由控制插件,适用于移动端单页面应用。 需要后台支持,当浏览器访问一个地址时,服务器返回的是这个单页面。前端路由由这个单页面来控制。 不支持hash路径控制。 提供...
I)Building Web Pages and Applications with the Open Web ...- Controlling the Browser History with the History API - Adding Location Detection with Geo-location - Converting HTML5 Apps to Native Apps
In this book, we’ll talk about the history of HTML and HTML5 and explore its new features. It covers: HTML5 basics Multimedia Canvas and SVG HTML5 applications HTML5 APIs HTML5 is required ...