HTML5学习笔记之History API


Posted in HTML / CSS onFebruary 26, 2015

一,开篇分析

好了,废话不多说,直接进入今天的主题,今天主要讲的是“History API”及在单页应用中的作用,并且会引入一个实际的例子做为讲解的原型范例,先来看看“History API”:

为了提高Web页面的响应速度,越来越多的开发者开始采用单页面结构(single-page application)的解决方案。所谓的单页面结构就是指多个页面间切换时,不刷新当前整个页面,更新页面展示数据,并且相应地改变地址栏中的url,以使用户可以分享这个url。

如果你使用chrome或者firefox等浏览器访问"github.com、plus.google.com"等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,

同时页面的URL发生了了改变。并且能够很好的支持浏览器前进和后退。是什么有这么强大的功能呢?恩,这就会说到今天的主角,HTML5里引用了新的API:

“history.pushState”和“history.replaceState”,就是通过这个接口做到无刷新改变页面URL的。先来看看"history"接口的详细方法:

复制代码
代码如下:

interface History {
readonly attribute long length;
readonly attribute any state;
void go(optional long delta);
void back();
void forward();
void pushState(any data, DOMString title, optional DOMString? url = null);
void replaceState(any data, DOMString title, optional DOMString? url = null);
};

(二),重点API说明

HTML5学习笔记之History API

在这里说明一点:"window.history.replaceState"和"window.history.pushState"类似,不同之处在于replaceState不会在window.history里新增历史记录点,其效果类似于window.location.replace(url),都是不会在历史记录点里新增一个记录点的。当你为了响应用户的某些操作,而要更新当前历史记录条目的状态对象或URL时,使用replaceState()方法会特别合适。

(三),引入实例

今天说说单页应用中我们通常会这样做,有一个菜单列表,点击相关菜单项然后动态加载相关模块,所有方式都是基于异步请求的,美中不足是,我们会发现地址栏不会有任何变化,以及浏览器中的前进和后退操作也不会有任何响应,这对用户不是很友好,所以为了解决这个问题“History”就有用武之地了,那么如何做到的那?不急先看一下例子中的效果图展示,然后一步步分析,如下所示:

HTML5学习笔记之History API

以下是监测数据,相同的url再次刷新不会重复请求。

HTML5学习笔记之History API

我们梳理一下流程:

页面首次载入,虽然我们访问的URL是"http://localhost:8888/bbSPA.html",但是,实际URL确是:

"http://localhost:8888/bbSPA.html#shanghai",”history.replaceState“完成了初始化url切换工作,并且初始做了加载

"shanghai.data"的数据工作,鼠标点击左边的任意一个菜单项,右侧内容是Ajax载入,并且页面的URL随之发生改变,例如,点击北京。

此时,我们点击地址栏的后退按钮,又回到了上海,并且显示内容。原理很简单,就是通过监听”window.onpopstate“,达到了自由切换的作用。

好了!其实很简单大家也尝试自己实践一下,以下是完整代码:

(1),html部分代码

复制代码
代码如下:

<body>
<center>
<Strong>bbSPA测试页面</strong>
</center>
<hr>
<ul
id="list"
style="float:left;
list-style:none;"
>
<li><a href="#beijing">北京</a></li>
<li><a href="#shanghai">上海</a></li>
<li><a href="#shenzhen">深圳</a></li>
<li><a href="#guangzhou">广州</a></li>
<li><a href="#tianjin">天津</a></li>
</ul>
<div
id="content-main"
style="margin-left:50px;
float:left;
width:220px;
border:1px solid #ccc;
height:120px;
color:#ff3300;"
>
</div>
</body>

(2),Js部分代码

复制代码
代码如下:

$(function(){
_init() ;
}) ;
var _history = [] ; // 记录hash的活动数据容器
function _init(){
var root = $("#list") ;
var defaultHash = root.find("li a").eq(1).attr("href") ;
var currentHash = window.location.hash ;
_addToHistory(defaultHash,true) ;
if(currentHash && currentHash != defaultHash){
_showContent((currentHash.split("#")[1])) ;
}
else{
_showContent((defaultHash.split("#")[1])) ;
}
$("#list").on("click","a",function(e){
var action = ($(this).attr("href").split("#")[1]) ;
_showContent(action) ;
e.preventDefault() ;
}) ;
window.addEventListener("popstate",function(e){
if(e.state && e.state.hash){
var hash = e.state.hash ;
if(_history[1] && hash === _history[1].hash){//存在历史记录,证明是后退事件
_showContent(hash.split("#")[1].toLowerCase()) ;
}else{ // 其它认为是非法后退或者前进
return ;
}
}
else{
return ;
}
},false) ;
} ;
function _showContent(action){
var samePage = _history[0]["hash"] == "#" + action ;
if(samePage){ // 同页面,则不重新加载
return ;
}
_loadContent(action + ".data").done(function(data){
_renderContent(data["content"]) ;
_addToHistory("#" + action,samePage) ;
}).fail(function(){
throw new Error("load content error !") ;
}) ;
} ;
function _loadContent(url){
return $.ajax({
url : url ,
dataType : "json"
}) ;
} ;
function _renderContent(text){
$("#content-main").text(text) ;
} ;
function _addToHistory(hash,noState){
var obj = {
hash : hash
} ;
if(noState){
_history.shift(obj) ;
window.history.replaceState(obj,"",hash) ;
}
else{
window.history.pushState(obj,"",hash) ;
}
_history.unshift(obj) ;
} ;
 

(四),最后总结

(1),理解History Api的使用方式以及具体实例中使用的目的是为了解决哪些问题。

(2),两个核心Api的不同之处在哪。

(3),测试本例子的注意事项如下。

测试需要搭建一个web服务器,以http://host/的形式去访问才能生效,如果你在本地测试以file://这样的方式在浏览器打开,就会出现如下的问题:

复制代码
代码如下:

Uncaught SecurityError: A history state object with URL 'file:///C:/xxx/xxx/xxx/xxx.html' cannot be created in a document with origin 'null'.

因为你要pushState的url与当前页面的url必须是同源的,而file://形式打开的页面是没有origin的,所以会报这个错误。

以上就是本文的全部内容了,希望大家能够喜欢。

HTML / CSS 相关文章推荐
css动画效果之animation的常用样式
Mar 09 HTML / CSS
不同浏览器对CSS3和HTML5的支持状况
Oct 31 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 HTML / CSS
HTML5新增加标签和功能概述
Sep 05 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 HTML / CSS
前端实现打印图像功能
Aug 27 HTML / CSS
浅析HTML5 Landmark
Sep 11 HTML / CSS
Html5新增了哪些功能
Apr 16 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 #HTML / CSS
HTML5 Canvas绘制圆点虚线实例
Jan 01 #HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 #HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
Jan 01 #HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 #HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 #HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 #HTML / CSS
You might like
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
PHP初学入门
2006/11/19 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
高校毕业生登记表自我鉴定
2013/11/03 职场文书
简历的自我评价
2014/02/03 职场文书
关于运动会的广播稿
2014/09/22 职场文书
班主任先进事迹材料
2014/12/17 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
nginx 添加http_stub_status_module模块
2022/05/25 Servers
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技