写在前面
有一次在上点点网的时候,发现登陆、注册动画效果非常华丽,但让我感到震惊的是页面竟能够实现无刷新跳转(已改版,观看此效果可以猛击此处:GitHub或阅FM),回顾了所学的前端知识,似乎没有任何技术可以实现这一点,于是百度搜罗了一下,才发现这原来是使用HTML5中History
API实现的效果,但奈何一直未曾派上用场。直到我的博客改版时,才将这一技术应用起来。
HTML4中的History API
history这个东西大家应该都不陌生,我们经常使用history.back(-1)来实现后退功能,具体的属性和方法如下:
属性
- length 历史的项数。JavaScript 所能管到的历史被限制在用浏览器的“前进”“后退”键可以去到的范围。本属性返回的是“前进”和“后退”两个按键之下包含的地址数的和。
方法
- back() 后退,跟按下“后退”键是等效的。
- forward() 前进,跟按下“前进”键是等效的。
- go() 用法:history.go(x);在历史的范围内去到指定的一个地址。如果 x < 0,则后退 x 个地址,如果 x > 0,则前进 x 个地址,如果 x == 0,则刷新现在打开的网页。history.go(0) 跟 location.reload() 是等效的。
HTML5中的History API
- history.pushState(data, title [, url]):往历史记录堆栈顶部添加一条记录;data会在onpopstate事件触发时作为参数传递过去;title为页面标题,当前所有浏览器都会忽略此参数;url为页面地址,可选,缺省为当前页地址。
- history.replaceState(data, title [, url]) :更改当前的历史记录,参数同上。
- 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的代码:
-
functionsupports_history_api(){
-
return!!(window.history&&history.pushState);
- }
为什么要使用History API
在AJAX给我们带来提高用户体验、减少HTTP连接数等好处的同时,也渐渐显露出一些不足之处,比如:
- 无法使用浏览器的前进、后退来切换前后数据。
- 当我们将浏览器地址栏中的链接与朋友分享时,可能实际上却并非我们期望的内容。
- 单纯地使用AJAX不利于搜索引擎优化。
实现无刷新跳转
上面都是一些理论知识(部分整理于网上),那么无刷新跳转要怎么实现呢?很简单的一句代码:-
history.pushState(null,'','newpage.html');
点此查看效果如果你使用的是HTML5浏览器,并点击了上面的按钮,那么应该可以看到,地址栏的地址发生了改变,页面却没有刷新或跳转。
这是一个最简单的Demo,虽然实现了地址的无刷新跳转,但内容却没有对应改变,我们只要在pushState的同时配合上AJAX,一个无刷新的页面跳转效果便完成了,AJAX的实现与本文主题无关,这里就不再赘述,下面给出的Demo下载会有AJAX部分的代码。
兼容浏览器前进后退效果
简单地利用history.pushState,虽然可以实现无刷新地址跳转,但并没有解决在浏览器中前进后退,内容并没有相应改变这个问题,此时就需要用到window.onpopstate事件了,当页面地址发生改变时,便会触发window对象的onpopstate事件,而我们只要在pushState的同时将当前页面的参数传递给浏览器,并在onpopstate事件中作出相应便可以了:
-
history.pushState({title:'页面标题',html:'页面HTML'},'','newpage.html');
-
window.onpopstate=function(event){
-
if(event&&event.state){
-
document.title=event.state.title;
-
document.body.innerHTML=event.state.html;
-
}
- }
当然,还有许多需要考虑的因素,如当页面打开时event.state为空,最后一次后退会失效等等,这就需要在页面载入时先将当前的标题与HTML保存到变量中,并在当event.state为空时将变量中的内容显示出来。
还有考虑当链接中含有井号“#”时应如何处理等等……
无刷新跳转的具体实现
熬夜将博文写出,顺便将Demo写成了一个jQuery插件,精神比较差,基本的功能已经实现,一些细节就暂不考虑了,如果有什么问题欢迎大家提出。
话说这次的博文也写的比较语无伦次,还请大家见谅。。
下载地址:http://vdisk.weibo.com/s/bVLeJ
注:由于History API存在安全方面的限制,请在服务端运行方能看到效果
还有话说
如果您愿意支持一下的话,欢迎戳一戳我的博客→http://www.clanfei.com←
由于前段时间博客大规模改版,再加上购置了一级域名,现阶段访问量比较惨淡ToT。。如蒙关照,不胜感激。。
=======================签 名 档=======================
原文地址(我的博客):http://www.clanfei.com/2012/09/1646.html
欢迎访问交流,至于我为什么要多弄一个博客,因为我热爱前端,热爱网页,我更希望有一个更加自由、真正属于我自己的小站,或许并不是那么有名气,但至少能够让我为了它而加倍努力。。
=======================签 名 档=======================
分享到:
相关推荐
但让我感到震惊的是页面竟能够实现无刷新跳转(已改版,观看此效果可以猛击此处:GitHub或阅FM),回顾了所学的前端知识,似乎没有任何技术可以实现这一点,于是百度了一下,才发现这原来是使用HTML5中History API...
history-server:一个用于单页应用的 HTTP服务器使用HTML5 history API实现
connect-history-api-fallback, 返回到使用 HTML 5历史记录API的应用程序的回退到 index.html connect-history-api-fallback通过指定索引页面向代理请求请求中间件,这对于使用HTML5历史API的单页应用程序。...
前端项目-html5-history-api,不支持pushstate、replaceState的浏览器的HTML5历史API扩展
随着SPA的流行,目前主流的框架都实现了SPA模式,包括我们夏洛克产品里面用到的Angular和Vue。但是作为一家爱折腾公司里面爱折腾的前端团队里面爱折腾的人,我们总想跟自己较劲来试试自己去实现简单的模式,这次小生...
一个zepto插件,利用HTML5 History API实现的路由控制插件,适用于移动端单页面应用。 需要后台支持,当浏览器访问一个地址时,服务器返回的是这个单页面。前端路由由这个单页面来控制。 不支持hash路径控制。 提供...
主要介绍了深入探究HTML5的History API,重点讲述了HTML5中新的方法history.pushState()和history.replaceState(),需要的朋友可以参考下
HistoryLocation是包装 HTML5 历史 API。 // ececute http://example.com/ import { HashLocation } from 'common-history' ; const hashLocation = new HashLocation ( ) ; // It is executed each time the ...
vue-routerHTML5 History 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 const router = new VueRouter({ mode: 'history', routes: [...] }) 当你使用 history 模式时,URL...
该Javascript库为较旧的浏览器提供了HTML5历史记录API的仿真。 该库根据W3C规范运行,没有添加任何新方法或不兼容的方法。 可以完全按照例如Dive Into HTML5书( )或History API规范( )中的描述使用该库 )。 您...
系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美驾驭O(∩_∩)O~,
“HistoryAPI:滚动恢复”的Polyfill_HTML_JavaScript_下载.zip
HTML5 历史 API 管理器现代浏览器支持使用 JavaScript 更新浏览器 URL 并将状态数据与更新后的 URL 关联的功能。 此实用程序旨在满足本机 API 中的几个差距。 定义在调用 pushState 和触发 onpopstate 事件时执行的...
history命令用于显示用户以前执行过的历史命令,并且能对历史命令进行追加和删除等操作。 如果你经常使用Linux命令,那么使用history命令可以有效地提升你的效率。 语法格式: history [参数] [目录] 常用参数: ...
相对于传统的rewrite方式,这种由refresh跳转的方式更为彻底,也更安全,快捷!!百度知乎等网站都在使用这种跳转方式,值得一试
基于PHP的Google Wave History Ajax无刷新评论带头像.zip
//移动到指定记录点,当前倒退1,相当于window.history.forward()window.history.length//可以了解历史中有多少个记录点 以上只是查资料时候的附带 下面来说 history.pushState与history.replaceState history.push...
ajax与HTML5 history pushState:replaceState实例1