操纵历史,利用HTML5 History API实现无刷新跳转

标签: 历史 利用 html5 | 发表时间:2012-09-05 02:46 | 作者:蓝飞
出处:http://www.clanfei.com/

写在前面

有一次在上点点网的时候,发现登陆、注册动画效果非常华丽,但让我感到震惊的是页面竟能够实现无刷新跳转(已改版,观看此效果可以猛击此处: GitHub阅FM),回顾了所学的前端知识,似乎没有任何技术可以实现这一点,于是百度搜罗了一下,才发现这原来是使用HTML5中History API实现的效果,但奈何一直未曾派上用场。直到博客改版时,才将这一技术应用起来。

HTML4中的History API

history这个东西大家应该都不陌生,我们经常使用history.back(-1)来实现后退功能,具体的属性和方法如下:

属性

  1. length 历史的项数。JavaScript 所能管到的历史被限制在用浏览器的“前进”“后退”键可以去到的范围。本属性返回的是“前进”和“后退”两个按键之下包含的地址数的和。

方法

  1. back() 后退,跟按下“后退”键是等效的。
  2. forward() 前进,跟按下“前进”键是等效的。
  3. go() 用法:history.go(x);在历史的范围内去到指定的一个地址。如果 x < 0,则后退 x 个地址,如果 x > 0,则前进 x 个地址,如果 x == 0,则刷新现在打开的网页。history.go(0) 跟 location.reload() 是等效的。

HTML5中的History API

  1. history.pushState(data, title [, url]):往历史记录堆栈顶部添加一条记录;data会在onpopstate事件触发时作为参数传递过去;title为页面标题,当前所有浏览器都会忽略此参数;url为页面地址,可选,缺省为当前页地址。
  2. history.replaceState(data, title [, url]) :更改当前的历史记录,参数同上。
  3. history.state:用于存储以上方法的data数据,不同浏览器的读写权限不一样。

浏览器兼容性

API Chrome Firefox(Geko) Internet Explorer Opera Safari
pushState, replaceState 5 4.0(2.0) -- 11.50 5.0
history.state -- 4.0(2.0) -- 11.50 --
下面是一段检测浏览器是否支持History API的代码:
  
  1. function supports_history_api(){
  2. return !!(window.history && history.pushState);
  3. }

为什么要使用History API

在AJAX给我们带来提高用户体验、减少HTTP连接数等好处的同时,也渐渐显露出一些不足之处,比如:
  1. 无法使用浏览器的前进、后退来切换前后数据。
  2. 当我们将浏览器地址栏中的链接与朋友分享时,可能实际上却并非我们期望的内容。
  3. 单纯地使用AJAX不利于搜索引擎优化。

实现无刷新跳转

上面都是一些理论知识(部分整理于网上),那么无刷新跳转要怎么实现呢?很简单的一句代码:
  
  1. history.pushState(null, '', 'newpage.html');
点此查看效果
如果你使用的是HTML5浏览器,并点击了上面的按钮,那么应该可以看到,地址栏的地址发生了改变,页面却没有刷新或跳转。

这是一个最简单的Demo,虽然实现了地址的无刷新跳转,但内容却没有对应改变,我们只要在pushState的同时配合上AJAX,一个无刷新的页面跳转效果便完成了,AJAX的实现与本文主题无关,这里就不再赘述,下面给出的Demo下载会有AJAX部分的代码。

兼容浏览器前进后退效果

简单地利用history.pushState,虽然可以实现无刷新地址跳转,但并没有解决在浏览器中前进后退,内容并没有相应改变这个问题,此时就需要用到window.onpopstate事件了,当页面地址发生改变时,便会触发window对象的onpopstate事件,而我们只要在pushState的同时将当前页面的参数传递给浏览器,并在onpopstate事件中作出相应便可以了:
  
  1. history.pushState({title: '页面标题', html: '页面HTML'}, '', 'newpage.html');
  2. window.onpopstate = function(event){
  3. if(event && event.state){
  4. document.title = event.state.title;
  5. document.body.innerHTML = event.state.html;
  6. }
  7. }
当然,还有许多需要考虑的因素,如当页面打开时event.state为空,最后一次后退会失效等等,这就需要在页面载入时先将当前的标题与HTML保存到变量中,并在当event.state为空时将变量中的内容显示出来。

还有考虑当链接中含有井号“#”时应如何处理等等……

无刷新跳转的具体实现

熬夜将博文写出,顺便将Demo写成了一个jQuery插件,精神比较差,基本的功能已经实现,一些细节就暂不考虑了,如果有什么问题欢迎大家提出。

话说这次的博文也写的比较语无伦次,还请大家见谅。。

下载地址: http://vdisk.weibo.com/s/bR64T

相关 [历史 利用 html5] 推荐:

操纵历史,利用HTML5 History API实现无刷新跳转

- - 蓝飞技术部落格
有一次在上点点网的时候,发现登陆、注册动画效果非常华丽,但让我感到震惊的是页面竟能够实现无刷新跳转(已改版,观看此效果可以猛击此处: GitHub或 阅FM),回顾了所学的前端知识,似乎没有任何技术可以实现这一点,于是百度搜罗了一下,才发现这原来是使用HTML5中History API实现的效果,但奈何一直未曾派上用场.

HTML5历史与开发介绍-HTML5 入门教程

- - BlogJava_首页
HTML的发展历史和HTML5的诞生. HTML 5是近十年来Web开发标准最巨大的飞跃. 和以前的版本不同,HTML 5并非仅仅用来表示Web内容,它的新使命是将Web带入一个成熟的应用平台,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化. (HTML5也有了自己的logo).

利用jQuery和HTML5实现无刷新Ajax风格的表单

- - CSDN博客推荐文章
        利用jQuery我们能够做出一些相当震撼的网页效果. jQuery的出现使DOM的操作更加的简单易用. 下面的教程展示了如何利用jQuery创建一个HTML5效果的邀请表格,同时实现表格内容的检查功能.         首页的格式必须是HTML5的格式.         接下来添加jQuery库,将如下代码添加到标签之前:.

Famo.us,利用 HTML5 做出 3D 手势操作界面

- - 爱范儿 · Beats of Bits
根据 TechCrunch 的报道,Famo.us 团可以让开发者利用 HTML5 创造 2D 和 3D 的手势操作界面,并且可适配在各种移动或者桌面设备. 今天,他们宣布获得了 400 万美元的 A 轮融资. 使用 Famo.us 服务的来建立网站,就会绕过浏览器内的渲染工具,使用 Famo.us 自己的框架,从而大大的增进渲染效果.

【转载】利用HTML5构筑物理模拟环境~ WebGL库Three.js入门(1/3)

- - HTML5研究小组
这是目前质量较好、讲解比较清楚的一篇 Three.js 的入门教程,原作者是日本人遠藤理平,由 HiWebGL 技术讨论群群友瀡风翻译,HiWebGL 授权转载. 感谢原作者的创作和瀡风辛苦翻译. 翻译:瀡风(2012年5月6日). 如需转载本中文译文,请联系翻译者瀡风. 中文翻译转自: http://www.hiwebgl.com/?p=1058.

利用HTML5技术让iOS应用在浏览器中运行 App.io 获得逾百万美元融资

- - 焦点
  移动应用是否可以在浏览器中运行?如果我说“可以”,你一定会追问:如何?.   为了满足这类要求,Kickfolio 应运而生. Kickfolio 可以利用 HTML5 技术让 iOS 应用运行在浏览器中,而开发者则可以通过该平台上传以生成自己的移动应用程序,然后让其他应用在 Web 上与这些产品进行交互.

HTML5 logo 发布

- Greyby - 酷壳 - CoolShell.cn
2011年1月19日,W3C发布了HTML5的log,打开W3C的页面,下在的图片印入眼前. 我的第一感觉,就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来,不畏艰难,不怕牺牲,一定要把HTML5的革命事业进行到底. 所以,请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章(关于各个徽章的含义,请参看这里).

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div,不过,它的长和宽不能通过css来定义,要使用标签属性:. 或者javascript对象属性设置:. 使用canvas,只有一种操作方式,使用javascript. 获得canvas对象的上下文对象,该对象是操作canvas的主要对象:. 使用canvas画最简单的线, 点击运行示例,结果看起来是这样:.

HTML5新特性

- - CSDN博客推荐文章
 通过fillStyle和strokeStyle 属性可以轻松的设置矩形的填充和线条. 颜色值使用方法和CSS 一样:十六进制数、rgb()、rgba() 和 hsla. 通过 fillRect可以绘制带填充的矩形. 使用 strokeRect 可以绘制只有边框没有填充的矩形. 如果想清除部分 canvas可以使用clearRect.

【转载】HTML5 Messaging

- - HTML5研究小组
HTML5 的Message API能够让HTML5页面之间传递消息,甚至这些页面可以不在同一样域名下. 为了让消息能从一个页面发送到另一个页面,主动发送消息的页面必须拥有另一个页面的窗口引用. 然后发送 页面针对接受页调用 postMessage() 方法. postMessage() 方法中 origin 参数的值必须与页面所在的iframe的域名相匹配.