HTML5 新增API学习总结
1.访问历史记录API，可用于制作单页面事件程序
之前的API：window.history.forward（） 页面前进，window.history.back（） 页面后退，window.history.go（） 页面刷新 可以传入具体的url地址
操作历史记录，存储历史记录
//兼容写法
if(window.history && history.pushState)
{history.pushState('数据'，'设置历史状态的标题tittle（浏览器暂不支持此属性）','?demo=123(url末端信息)')
}
else{alert('你的浏览器不支持')
}当我们在伪造的访问历史中前进后退时会执行一个popstate事件
window.addEventListener('popstate',function(e){e.state //历史数据信息})window.location 可以拿到当前网页中和地址相关的信息其中的search属性可以获取到url代码
var search=window.location.search.split（'='）[ 1 ] 例如可以得到['?','geww']数组
decodeURI(search)可以将编码转化为中文
2.全屏API requestFullScreen
全屏API有兼容问题因此使用时要采用兼容写法
var elem = 需要全屏的元素;
if(elem.webkitRequestFullScreen){ //兼容谷歌与Safari浏览器elem.webkitRequestFullScreen();
}else if(elem.mozRequestFullScreen){ //兼容Firefox浏览器elem.mozRequestFullScreen();
}else{elem.requestFullScreen();
}案例代码：
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>全屏API</title>
</head>
<body>
<p>这是个可以全屏的标签</p>
</body>
</html>
<script>var elem = document.querySelector('p');elem.addEventListener('click',function () {if(elem.webkitRequestFullScreen){elem.webkitRequestFullScreen();}else if(elem.mozRequestFullScreen){elem.mozRequestFullScreen();}else{elem.requestFullScreen();}})
</script>3.Application Cache 让网页可以离线访问
在<html>标签中加入 manifest = 'cache.manifest' →<html manifest = 'cache.manifest'>
cache.manifest是用来放html5的缓存文件
具体用法在文件夹中创建cache.manifest文件，然后编辑：
基本格式如下：
CACHE MANIFEST
# version 1.0.0 //文件版本CACHE://放需要缓存的文件如：index.htmlNETWORK:*3.web Strorage 应用程序储存
if(window.locaStorage){localStorage.setItem('key1,value) //用来存储用户输入的信息localStorage['key1'] / localStorage.getItem('key1') // 可以用来获取用户输入的信息}无刷新访问历史案例练习：
//data.js里边的内容
'use strict';var data = {"五环之歌": '作曲 : 唐诃/吕远 \n <br />' +'作词 : 岳云鹏/MC Hotdog \n <br />' +'我把车子开上五环 \n <br />' +'我把车子开上五环 \n <br />' +'快点把车子开上五环 \n <br />' +'什么都不管 \n <br />' +'我就是要上五环 \n <br />' +'啊～～～五环 你比四环多一环（fifth Ring） \n <br />' +'啊～～～五环 你比六环少一环（ I\'m driving on the fifth ring） \n <br />' +'终于有一天 你会修到七环 \n <br />' +'修到七环怎么办 你比五环多两环 \n <br />' +'热狗： \n <br />' +'车一直塞 表情痴呆 早就习惯漫无目的一直开 \n <br />' +'那五环依然那么自在 \n <br />' +'它一直在 \n <br />' +'腐烂的喇叭声 苦难的师傅一直唉～ \n <br />' +'北京的 style 在上下班 车子一直排 \n <br />' +'为了生活 为了梦想 为了放假单 \n <br />' +'或许有天 我们必须要去 那八环 \n <br />' +'Rest in peace 北京的交通 我为你放花篮 \n <br />' +'岳云鹏： \n <br />' +'啊～～～五环 你比四环多一环（fifth Ring） \n <br />' +'啊～～～五环 你比六环少一环（ I\'m driving on the fifth ring） \n <br />' +'终于有一天 你会修到七环 \n <br />' +'修到七环怎么办 你比五环多两环 \n <br />' +'热狗： \n <br />' +'多少人明知山有虎 却偏向虎山行 \n <br />' +'我明明知道五环堵 \n <br />' +'这条回家路 祸不单行 \n <br />' +'要塞啊！ 就塞啊！哼 ！ 我不担心 \n <br />' +'一辈子没有洗过车 我车子不干净 \n <br />' +'这烟抽的看起来多淡定 \n <br />' +'这边苦苦的笑容呢？吐出了叹气 \n <br />' +'你还想看什么戏 \n <br />' +'在车上乖乖吃着你的煎饼 \n <br />' +'快点上五环 因为或许先上先赢 \n <br />' +'我把车子开上五环 \n <br />' +'我把车子开上五环 \n <br />' +'快点把车子开上五环 \n <br />' +'什么都不管 \n <br />' +'我就是要上五环 \n <br />' +'五环五环 \n <br />' +'五环五环 \n <br />' +'这是五环五环 \n <br />' +'什么都不管 \n <br />' +'我现在就上五环',"我的滑板鞋": '有些事我都已忘记 \n <br />' +'但我现在还记得 \n <br />' +'在一个晚上我的母亲问我 \n <br />' +'今天怎么不开心 \n <br />' +'我说在我的想象中有一双滑板鞋 \n <br />' +'与众不同最时尚跳舞肯定棒 \n <br />' +'整个城市找遍所有的街都没有 \n <br />' +'她说将来会找到的时间会给我答案 \n <br />' +'星期天我再次寻找依然没有发现 \n <br />' +'一个月后我去了第二个城市 \n <br />' +'这里的人们称它为魅力之都 \n <br />' +'时间过的很快夜幕就要降临 \n <br />' +'我想我必须要离开 \n <br />' +'当我正要走时我看到了一家专卖店 \n <br />' +'那就是我要的滑板鞋 \n <br />' +'我的滑板鞋时尚时尚最时尚 \n <br />' +'回家的路上我情不自禁 \n <br />' +'摩擦 摩擦 \n <br />' +'在这光滑的地上摩擦 \n <br />' +'月光下我看到自己的身影有时很远有时很近 \n <br />' +'感到一种力量驱使我的脚步 \n <br />' +'有了滑板鞋天黑都不怕 \n <br />' +'一步两步一步两步 一步一步似爪牙 \n <br />' +'似魔鬼的步伐 \n <br />' +'摩擦 摩擦 \n <br />' +'我给自己打着节拍 \n <br />' +'这是我生命中美好的时刻 \n <br />' +'我要完成我最喜欢的舞蹈 \n <br />' +'在这美丽的月光下在这美丽的街道上 \n <br />' +'我告诉自己这是真的这不是梦 \n <br />' +'一步两步一步两步 一步一步似爪牙 \n <br />' +'似魔鬼的步伐 \n <br />' +'摩擦 摩擦 \n <br />' +'在这光滑的地上摩擦 \n <br />' +'摩擦似魔鬼的步伐 \n <br />' +'似魔鬼的步伐 \n <br />' +'一步两步一步两步 一步一步似爪牙 \n <br />' +'似魔鬼的步伐 \n <br />' +'摩擦 摩擦 \n <br />' +'在这光滑的地上摩擦 \n <br />' +'摩擦',"咱们屯里人": '作曲 : 杨柏森 \n <br />' +'作词 : 马金萍 \n <br />' +'偶滴老嘎 就组在则个屯 \n <br />' +'偶系则个屯里 土生土长滴羊 \n <br />' +'别看屯子不仔大呀 有山有水有速棱 \n <br />' +'邻里先情挺和睦 老少爷们更滑群 \n <br />' +'屯子磊面发生过 黑多黑多的事 \n <br />' +'回想系那是特别的梗 \n <br />' +'朋友们若系有森确呀 我领你仰视仰视 \n <br />' +'仰视仰视偶们屯里的羊 \n <br />' +'偶滴老嘎 就组在则个屯 \n <br />' +'偶系则个屯里 土生土长滴羊 \n <br />' +'别看屯子不仔大呀 有山有水有速棱 \n <br />' +'邻里先情挺和睦 老少爷们更滑群 \n <br />' +'屯子磊面发生过 黑多黑多的事 \n <br />' +'回想系那是特别的梗 \n <br />' +'朋友们若系有森确呀 我领你仰视仰视 \n <br />' +'仰视仰视偶们屯里的羊'
};
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>访问历史记录API</title><style>*{margin: 0;padding: 0;}html,body {height: 100%;margin: 0;overflow: hidden;padding: 0}aside{width: 200px;height: 100%;float: left;background-color: greenyellow;}aside>ul{width: 100%;height: 100%;}aside>ul>li{width: 100%;height: 50px;margin-bottom:10px;line-height: 50px;cursor: pointer;text-align: center;}div{padding-left:10px;height: 100%;background-color:blueviolet;margin-left: 200px;}</style>
</head>
<body>
<aside><ul></ul>
</aside>
<div></div>
</body>
</html>
<script src="data.js"></script>
<script>var ul = document.querySelector('ul');var lis = ul.children;var div = document.querySelector('div');for(var i in data){var li =document.createElement('li');li.innerHTML = i;li.onclick = addContent;ul.appendChild(li);}function addContent() {while(div.hasChildNodes()){div.removeChild(div.lastChild);}div.innerHTML = data[this.innerHTML];if(window.history && history.pushState){history.pushState(this.innerHTML,'title useless','?t='+decodeURI(this.innerHTML));}}window.addEventListener('popstate',function (e) {div.innerHTML = data[e.state];})
</script>转载于:https://my.oschina.net/u/3256201/blog/836056
HTML5 新增API学习总结相关推荐
- HTML5 新增 API
HTML5 新增 API 1. 选择器 API 2. 历史对象 API 3. 新增 Web 存储 API 3.1 Web 存储 API 类型 3.2 本地存储 localStorage 3.2.1 l ...
- HTML5新增属性学习笔记
1.form属性 表单内的从属元素,可以写在表单外部.可以通过指定元素的form属性来声明元素所属表单.form的属性值为表单的id. 1 <form id="testForm&quo ...
- PJAX初体验（主要是利用HTML5 新增API pushState和replaceState+AJAX）
说在前面 什么是PJAX呢? 站在应用角度的就是既实现了页面无刷新的效果,同时也产生了浏览器的前进和后退,而且url也会变化. 也不是什么新鲜技术,主要是AJAX+html5 pushState和re ...
- html标签api,html5新增标签+API介绍
新增标签 1.embed embed标签是html5新增的标签,用来嵌入内容,比如插件等,常用于视频文件的播放(为外部应用程序定义容器). 这篇文章介绍了embed的常用属性,基本都是定义播放器的一些 ...
- HTML5 学习总结（二）——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html><head>< ...
- 分享Silverlight/Windows8/WPF/WP7/HTML5一周学习导读(5月21日-5月26日)
分享Silverlight/Windows8/WPF/WP7/HTML5一周学习导读(5月21日-5月26日) 本周Silverlight学习资源更新 Silverlight Super TextBo ...
- HTML5中新增的音频标签是,HTML5新增的音频标签、视频标签
我们所说的H5就是我们所说的HTML5中新增的语言标准 一.音频标签 在HTML5当中有一个叫做audio的标签,可以直接引入一段音频资源放到我们的网页当中 格式: 降级的文字说明(当音频文件不能本浏 ...
- 分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(4月16日-4月22日)
分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(4月16日-4月22日) 本周Silverlight学习资源更新 银光中国网友原创:Silverlight中获取 ...
- HTML5新增标签与属性
文章目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placeho ...
最新文章
- 安装黑屏_含能公司黑屏管理助力智能化改造
- 抽象类的基本概念------abstract
- java配置出现的问题解释_java SE问题总结(持续更新。。。)
- (转)初次体验.net Ajax无刷新技术
- java webservice 服务器_java如何写webservice服务端
- 《Java编程思想》Java I/O系统章节阅读笔记
- python winio_Python pywinio包_程序模块 - PyPI - Python中文网
- 协议栈处理中的conntrack HASH查找/Bloom过滤/CACHE查找/大包与小包/分层处理风格
- pyecharts可视化画3D动态地球仪，世界地图，中国地图。
- 计算机的剪切快捷键是什么意思,word中剪切的快捷键是什么 -电脑资料
- 基于SSM的校园兼职管理系统
- Hi-C数据可视化-组装角度
- LA 3406 Bingo *
- OOP上半部分-Java与生活
- 3559a sample_vio 修改中遇到的奇怪问题
- 基于MATLAB的MIMO信道估计（附完整代码与分析）
- gitlab 安装以及卸载
- jboss下ejb简介
- Cisco、华为、H3C交换机配置文件自动备份
- 计算机 开机硬盘灯一直亮,电脑一开机硬盘灯就一直亮