HTML5学习笔记之History API

这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会”h5″能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美驾驭O(∩_∩)O~

先出一道题目:以下不是HTML5新增的API是 http://hovertree.com/tiku/bjaf/pic2kvcg.htm

一,开篇分析

好了,废话不多说,直接进入今天的主题,今天主要讲的是“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);
};
/* 何问起 hovertree.com */

(二),重点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) ;
} ;/* 何问起 hovertree.com */

(四),最后总结

  (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的,所以会报这个错误。

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

推荐:http://www.cnblogs.com/roucheng/p/texiao.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/120280.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • hostapd配置

    hostapd配置我们有个闲置的USB无线适配器(WIFI适配器),而我们的ISP路由器却是有线的。怎样把我们的家庭NAS服务器变成无线访问点(WAP),在不用买额外的WPA盒子的情况下,在Debian或Ubuntu系统下使用无线设备访问到它?你需要使用hostapd作为访问点和认证服务器。它实现了IEEE802.11访问点管理,IEEE802.1X/WPA/WPA2/EAP授权,RADIUS客户端,…

    2022年5月21日
    217
  • TCP的拥塞控制_假设tcp拥塞控制算法中

    TCP的拥塞控制_假设tcp拥塞控制算法中在某段时间,若对网络中某一资源的需求超过了该资源所能提供的可用部分,网络性能就要变坏,这种情况就叫做网络拥塞。在计算机网络中数位链路容量(即带宽)、交换结点中的缓存和处理机等,都是网络的资源。若出现拥塞而不进行控制,整个网络的吞吐量将随输入负荷的增大而下降。当输入的负载到达一定程度吞吐量不会增加,即一部分网络资源会丢失掉,网络的吞吐量维持在其所能控制的最大值,转发节点的缓存不够大这造成分…

    2022年4月20日
    56
  • java 递归方法卡住_递归算法怎么理解

    java 递归方法卡住_递归算法怎么理解Java递归方法1.说明定义:一个方法体内调用它自己方法递归是一种隐式的循环,它会重复的执行某段代码,但这种重复执行无须循环控制递归一定要向着已知的方向递归,否则这种递归就变成了无穷递归,类似于死循环2.code举例publicclassRecursionTest{publicstaticvoidmain(String[]args){RecursionTestx=newRecursionTest();System.

    2022年9月17日
    0
  • 两种通用型测试用例模板(excel/xmind)

    两种通用型测试用例模板(excel/xmind)测试用例模板一、针对大版本需求的测试用例模板1、测试用例模板说明1.1、表头说明 xxx项目V1.0版本-测试用例(示范标题)             (最有料信息科技有限公司测试组/ONLYFORINTERNALUSEONLY)      

    2022年7月17日
    34
  • IDEA 2021.4 激活码大全【在线破解激活】

    IDEA 2021.4 激活码大全【在线破解激活】,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月17日
    85
  • linux shell 脚本 入门到实战详解[⭐建议收藏!!⭐]

    linux shell 脚本 入门到实战详解[⭐建议收藏!!⭐]文章目录shell入门到实战详解[⭐建议收藏!!⭐]关于作者**作者介绍**一、shell入门简介1.1什么是shell1.2shell编程注意事项1.3第一个shell脚本helloworld二、shell环境变量讲解2.1shell变量详解2.2shell系统变量介绍2.3shell环境变量介绍2.3.1常见的系统环境变量2.4shell用户环境变量介绍2.4.1自定义shell环境变量2.4.2echo打印菜单栏2.4.3shell中彩色输出h

    2022年7月24日
    5

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号