HTML5 API详解(15):History 不刷新也可以实现网页跳转
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数据,不同浏览器的读写权限不一样。
为什么要使用History API
在ajax给我们带来提高用户体验、减少HTTP连接数等好处的同时,也渐渐显露出一些不足之处,比如:
无法使用浏览器的前进、后退来切换前后数据。
当我们将浏览器地址栏中的链接与朋友分享时,可能实际上却并非我们期望的内容。
单纯地使用AJAX不利于搜索引擎优化。
浏览器兼容性
pushState, replaceState | 5 | 4.0(2.0) | -- | 11.50 | 5.0 |
history.state | -- | 4.0(2.0) | -- | 11.50 | -- |
案例代码:
<div class="container">
<div class="row">
<ul class="nav navbar-nav">
<li><a href="home.html" class="historyAPI">Home</a></li>
<li><a href="about.html" class="historyAPI">About</a></li>
<li><a href="contact.html" class="historyAPI">Contact</a></li>
</ul>
</div>
<div class="row">
<p>点击链接,ajax修改下面内容</p>
<p id="content"></p>
</div>
</div>
//检测浏览器是否支持history API
if(window.history && history.pushState){
alert('支持');
}else{
alert('不支持');
}
$('.historyAPI').on('click', function(e){
//阻止a标签默认跳转行为
e.preventDefault();
//获取新的href
var href = $(this).attr('href');
//根据新的href去执行的对应的操作,一般是用ajax进行内容刷新
$('#content').html('当前页面href是:/redbag/'+href);
//添加一条浏览器的历史记录
history.pushState(null, null, href);
});
//点击浏览器的前进后退按钮的时候出发
window.addEventListener("popstate", function(e) {
$('#content').html('当前页面href是:'+location.pathname);
});
HTML5 API详解(15):History 不刷新也可以实现网页跳转相关推荐
- HTML5 API详解(18):IndexedDB 本地存储
Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了Local Storage和Session Storage与IndexedDB.Web Storage使用简单 ...
- HTML5 API详解(17):Web SQL DataBase本地数据库
Web SQL Database是一个已经废弃的规范,但是鉴于除了IE和Firefox,其他浏览器都已经实现了Web SQL Database,并且它还具有一些HTML5 Storage所不具有的特性 ...
- HTML5 API详解(16):web socket 全双工通信
目前实时Web应用的实现方式,大部分是围绕轮询和其他服务器端推送技术展开的,其中最著名的是Comet.Comet技术可以让服务器主动以异步方式向客户端推送数据. 使用轮询时,浏览器定期发送HTTP请求 ...
- HTML5 API详解(14):Notification 实现桌面提醒
桌面提醒功能可以在窗口隐藏甚至是浏览器最小化(不被激活)的情况下,依然可以对用户进行信息通信,采用的方式就是在电脑桌面的右下角弹出消息提示框.这样的一个功能可以使用在一些消息推送的场景下.不过,虽然h ...
- HTML5 API详解(12):canvas画布API提供的内容很丰富啊~
不考虑代码质量的话,一般来说css3>canvas>纯js. 1. css3动画是独立与js线程的,js的运算操作不会阻塞css3的动画,所以在系统cpu占用率较高的时候,css3的动画性 ...
- HTML5 API详解(5):Page Visibility API帮您省流量,提高体验
页面可见性API可以让你知 道一个页面什么时候是隐藏的,什么时候是显示的.当页面被最小化或者被切换成后台标签页时,浏览器会触发一个 visibilitychange事件,告诉你用户已经看不到这个页面了 ...
- HTML5 API详解(3):为何网页上要增加Battery电池状态API
手机自身的电源管理已经相当不错了,那为何网页上还要增加一个HTML5 Battery电池状态API呢? 随着HTML5以及CSS3技术支持与发展,以及手机越来越高性能带来的可行性.移动端的页面显然会越 ...
- HTML5 API详解(11):Cache 应用程序缓存,这下离线也可以玩了
Web缓存是指一个Web资源(如html页面,图片,js,数据等)存在于Web服务器和客户端(浏览器)之间的副本.缓存会根据进来的请求保存输出内容的副本:当下一个请求来到的时候,如果是相同的URL,缓 ...
- HTML5 API详解(10):sessionStorage 你用过吗?
sessionStorage和localStorage大部分是相同的,包括功能和使用.功能上唯一的区别是:localStorage是本地长时间存储,不会因为窗口关闭而丢失存储的数据,而sessionS ...
最新文章
- 新手求助:大神们帮帮我,关于在ViewPage中添加GridView的问题
- 黄聪:如何使用CodeSmith批量生成代码(转:http://www.cnblogs.com/huangcong/archive/2010/06/14/1758201.html)...
- 华为云交付项目服务器配置表,云端服务器配置表
- 【Java源码分析】LinkedHashMap源码分析
- 服务器维护通宵,20150405晚上凌晨通宵进行服务器系统维护
- dmv io读写高的sql_适用于DBA的前8大新(或增强)SQL Server 2017 DMV和DMF
- Pandas 中第二好用的函数是?
- C是一个结构化语言它的重点在于算法和数据结构
- 马斯克称已将大脑上传到云端【系统或已开源】
- sshv2 mitm工具SSH MITM v2.1的使用记录
- 目前几种实时视频流协议对比
- nginx日志中$request_body 十六进制字符(\\x22) 引号问题处理记录
- oracle 视图的写法,Oracle视图基础详解与实例
- 431 Request Header Fields Too Large 解决
- 多线程抢票_多线程抢票系统浅析
- 计算机贴保密标识,保密标贴粘贴位置说明
- 二维码的纠错码原理及如何纠错(2)
- 大数据下的90后事业画像
- MySQL 表的增删改查(进阶篇②)· 联合查询 内连接 外连接 · 自连接 · 子查询 exists · 合并查询 union
- 【360安全卫士显示界面异常解决】
热门文章
- 2020年豪华车市场洞察
- mac os touch命令_MacOS系统终端常用命令大全
- python问题关键词匹配算法_python通过BF算法实现关键词匹配的方法
- oracle取日期最大的一条数据_Tableau可视化分析【2】如何连SQL数据查询
- 界面设计方法 (1) — 5. 表单功能的设计
- 面向非易失性内存的持久索引数据结构研究综述
- 面向非易失内存的MPI-IO接口优化
- 【2016年第6期】中国科学院科学数据云建设与服务
- 【数据结构与算法】图的邻接矩阵表示及其BFS、DFS的Java实现
- 文本处理三剑客awk的使用