一,开篇分析
Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,
让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美驾驭O(∩_∩)O~,好了,废话不多说,直接进入今天的主题,
今天主要讲的是“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"接口的详细方法:
1 interface History { 2 readonly attribute long length; 3 readonly attribute any state; 4 void go(optional long delta); 5 void back(); 6 void forward(); 7 void pushState(any data, DOMString title, optional DOMString? url = null); 8 void replaceState(any data, DOMString title, optional DOMString? url = null); 9 };
(二),重点API说明
在这里说明一点:"window.history.replaceState"和"window.history.pushState"类似,不同之处在于replaceState不会在window.history里新增历史记录点,其效果类似于window.location.replace(url),都是不会在历史记录点里新增一个记录点的。当你为了响应用户的某些操作,而要更新当前历史记录条目的状态对象或URL时,使用replaceState()方法会特别合适。
(三),引入实例
今天说说单页应用中我们通常会这样做,有一个菜单列表,点击相关菜单项然后动态加载相关模块,所有方式都是基于异步请求的,美中不足是,我们会发现地址栏不会有任何变化,以及浏览器中的前进和后退操作也不会有任何响应,这对用户不是很友好,所以为了解决这个问题“History”就有用武之地了,那么如何做到的那?不急先看一下例子中的效果图展示,然后一步步分析,如下所示:
以下是监测数据,相同的url再次刷新不会重复请求。
我们梳理一下流程:
页面首次载入,虽然我们访问的URL是"http://localhost:8888/bbSPA.html",但是,实际URL确是:
"http://localhost:8888/bbSPA.html#shanghai",”history.replaceState“完成了初始化url切换工作,并且初始做了加载
"shanghai.data"的数据工作,鼠标点击左边的任意一个菜单项,右侧内容是Ajax载入,并且页面的URL随之发生改变,例如,点击北京。
此时,我们点击地址栏的后退按钮,又回到了上海,并且显示内容。原理很简单,就是通过监听”window.onpopstate“,达到了自由切换的作用。
好了!其实很简单大家也尝试自己实践一下,以下是完整代码:
(1),html部分代码
1 <body> 2 <center> 3 <Strong>bbSPA测试页面</strong> 4 </center> 5 <hr> 6 <ul 7 id="list" 8 style="float:left; 9 list-style:none;" 10 > 11 <li><a href="#beijing">北京</a></li> 12 <li><a href="#shanghai">上海</a></li> 13 <li><a href="#shenzhen">深圳</a></li> 14 <li><a href="#guangzhou">广州</a></li> 15 <li><a href="#tianjin">天津</a></li> 16 </ul> 17 <div 18 id="content-main" 19 style="margin-left:50px; 20 float:left; 21 width:220px; 22 border:1px solid #ccc; 23 height:120px; 24 color:#ff3300;" 25 > 26 </div> 27 </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的,所以会报这个错误。
哈哈哈,本篇结束,未完待续,希望和大家多多交流够沟通,共同进步。。。。。。呼呼呼……(*^__^*)
Similar Posts:
- 大熊君学习html5系列之------requestAnimationFrame(实现动画的另一种方案)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻--,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美驾驭O(∩_∩)O~,好了,废话不多说,直接进入今天的主题, 今天主要讲的是"requestAnimationFrame API"及在客户端浏览器中的作用,并且会引入一个实际的例子做为讲解的原型范例,让我们先来
- 【单页应用巨坑之History】细数History带给单页应用
前言 在我们日常的网页浏览中,我们非常喜欢做一个操作:点击浏览器的前进后退 在Ajax技术出现后,有些时候前进后退就会给开发者带来困扰,甚至一些开发者试图去干掉History 随着Html5的发展,移动端的兴旺,单页应用出现了,于是History的处理被不得不提上议程了! 要知道,这一直是一项让人不愿意去碰的巨坑,但是单页应用却不得不去解决 首先History的处理逻辑看似简单,实则复杂,稍不注意就会出问题,我们这里来探讨下单页中History的处理规则 基础知识 javascript中Hist
- HTML5学习笔记之History API
一,开篇分析 好了,废话不多说,直接进入今天的主题,今天主要讲的是"History API"及在单页应用中的作用,并且会引入一个实际的例子做为讲解的原型范例,先来看看"History API": 为了提高Web页面的响应速度,越来越多的开发者开始采用单页面结构(single-page application)的解决方案.所谓的单页面结构就是指多个页面间切换时,不刷新当前整个页面,更新页面展示数据,并且相应地改变地址栏中的url,以使用户可以分享这个url. 如果你使
- 大熊君大话NodeJS之------Net模块
一,开篇分析 从今天开始,我们来深入具体的模块学习,这篇文章是这个系列(大熊君大话NodeJS)文章的第三篇,前两篇主要是以理论为主,相信大家在前两篇的学习中, 对NodeJS也有一个基本的认识,没事!!!趁热打铁,让我们继续将NodeJS进行到底,好了废话不多说,直接进入今天的主题 "Net模块" ,那么"Net"应该如何理解那? 它是做什么用的那?(Net模块可用于创建Socket服务器或Socket客户端. NodeJS 的数据通信,最基础的两个模块是 Net
- HTML5中的History和Location对象
今天发现原来HTML5对History和Location对象进行了改进,提供了几个新的API.我觉得,这用来结合Ajax来使用,弥补Ajax技术更新内容但不产生历史记录的问题,十分有用. 我很久之前就想过通过锚点来解决实现书签和定位,配合iframe使用一些小技巧,还可以实现历史记录的产生.后来发现,原来IE8和其它现代浏览器都大都已经实现了更改锚点来产生历史记录了. 记得,我第一次做的一个相关的小应用是工大在线的翻页书签功能:http://www.gdutonline.com/newstude
- 学习html5有哪些比较好的书籍推荐?
学习html5有哪些比较好的书籍推荐? --cut-- birdgg在2015-02-02 02:49:05回答到: html5 权威指南 GelyIan在2015-02-02 04:50:30回答到: 如果是新入门的建议 <HTML5从入门到精通>.<HTML5和CSS3权威指南>,逐步深入,高级的话可以参考<HTML5权威指南>.<HTML5揭秘>.<Head first html5>还有<HTML5高级程序设计> 希望可以帮到你
- 【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦
导航 [初探HTML5之使用新标签布局]用html5布局我的博客页! [HTML5初探之form标签]解放表单验证.增加文件上传.集成拖放 [HTML5初探之绘制图像(上)]看我canvas元素引领下一代web页面 [HTML5初探之绘制图像(下)]看我canvas元素引领下一代web页面 [HTML5初探之多媒体元素]视频播放HTML5.Flash谁才是王道? [HTML5初探之本地存储]如果没有数据库... [HTML5初探之离线应用]如何打造零请求.无流量的网站? [HTML5初探之通信A
- JavaScript的History API使搜索引擎抓取AJAX内容
大家在浏览Facebook的相册时有没有发现,页面局部刷新的同时地址栏的地址也改变了,而且不是hash的方式.它使用的就是HTML5 history新增的几个API,作为window的一个全局变量,在HTML4的时代history已不是什么新鲜的事物了.我们经常使用的就有 history.back()以及history.go() . 我一直以为没有办法做到,直到前两天看到了Discourse创始人之一的Robin Ward的解决方法,不禁拍案叫绝. Discourse是一个论坛程序,严重依赖Aj
- 【HTML5初探之Geolocation API】让我们获取女神的地址
导航 [初探HTML5之使用新标签布局]用html5布局我的博客页! [HTML5初探之form标签]解放表单验证.增加文件上传.集成拖放 [HTML5初探之绘制图像(上)]看我canvas元素引领下一代web页面 [HTML5初探之绘制图像(下)]看我canvas元素引领下一代web页面 [HTML5初探之多媒体元素]视频播放HTML5.Flash谁才是王道? [HTML5初探之本地存储]如果没有数据库... [HTML5初探之离线应用]如何打造零请求.无流量的网站? [HTML5初探之通信A
- 30多个资源助你学习html5
众所周知,HTML5当前在互联网领域掀起了一场大浪潮,无数的HTML5的应用及示例相继而出,HTML5致力于为前端开发提供全面的标记语言,将成为Web的领跑者.本文中的30多个资源可帮你开始学习HTML5. Blowing up HTML5 video and mapping it into 3D space(将HTML5视频吹散并组成3D效果)研究了HTML 5中的Canvas 和Video 标签,并发现了一些很酷的特性.其中之一就是Canvas.drawImage() api.此为详细介绍.