H5新增API
这里写目录标题
-
- 1 网络状态
- 2 全屏
- 3 文件读取
-
- 3.1 Files对象
- 3.2FileReader对象
- 4 地理定位
-
- 4.1 API详解
- 4.2 应用
- 5 拖拽
-
- 5.1 拖拽和释放
- 5.2 设置元素为可拖放
- 5.2 拖拽API的相关事件
- 5.3 DataTransfer
- 6 Web存储
-
- 6.1 特性
- 6.2 window.sessionStorage
- 6.3 window.localStorage
- 6.4 方法详解
- 6.5 其它
- 7 应用缓存
-
- 7.1 优势
- 7.2 缓存清单
- 7.3 manifest文件格式*
- 7.4 其它
- 8 多媒体
1 网络状态
我们可以通过window.navigator.onLine来检测，用户当前的网络状况，返回一个布尔值， 但是不同浏览器会存在差异
所以HTML5 给我们提供了2个事件 online 和 offline
online用户网络连接时被调用
offline用户网络断开时被调用
他们监听的对象都是window
2 全屏
HTML5规范允许用户自定义网页上任一元素全屏显示。
1、Node.requestFullScreen() 开启全屏显示
2、Node.cancelFullScreen() 关闭全屏显示
由于其兼容性原因，不同浏览器需要添加前缀如：
webkit内核浏览器：webkitRequestFullScreen、webkitCancelFullScreen，如chrome浏览器。
Gecko内核浏览器：mozRequestFullScreen、mozCancelFullScreen，如火狐浏览器。
ms 微软 msRequestFullscreen
3、document.fullScreen检测当前是否处于全屏
不同浏览器需要添加前缀
document.webkitIsFullScreen、document.mozFullScreen
全屏伪类选择器 也有兼容性问题 需要添加前缀思密达
:full-screen 、:-webkit-full-screen {}、:moz-full-screen {}
<button id="full">全屏显示</button>
<button id="cancelfull">取消全屏显示</button>
<button id="isfull">是否全屏显示</button>
<script src="../QQ浏览器/js/jquery.min.js"></script>
<script>
var img = document.querySelector("img");
document.querySelector("#full").onclick = function() {
// img.webkitRequestFullScreen();
//考虑到兼容问题，综合的写法
if (img.requestFullscreen) { //正常浏览器
img.requestFullscreen();
} else if (img.webkitRequestFullScreen) {
img.webkitRequestFullScreen();
} else if (img.mozRequestFullScreen) { //moz
img.mozRequestFullScreen();
} else if (img.msRequestFullscreen) { //微软
img.msRequestFullscreen();
} else { //欧朋
img.oRequestFullscreen();
}
};
//取消全屏
document.querySelector("#cancelfull").onclick = function() {
img.webkitCancelFullScreen();
};
</script>
3 文件读取
可以把上传的文件，内容显示到页面或者上传完毕图片显示缩略图到页面上
通过FileReader对象我们可以读取本地存储的文件，使用 [File ]
(https://developer.mozilla.org/zh-CN/docs/DOM/File)对象来指定所要读取的文件或数据。其中File对象可以是来自用户在一个 元素上选择文件后返回的FileList 对象，也可以来自由拖放操作生成的 DataTransfer
<body>
<input type="file" name="file" id="file" value="文件读取" multiple>
<div>
</div>
<img src="" alt="" width="100">
<script>
var file = document.querySelector("input");
var div = document.querySelector("div");
var img = document.querySelector("img");
file.onchange = function() {
//1.files对象是上传文件的集合 //针对文件对象
console.log(file.files);
//2.FileReader对象 HTML5新增内建对象，可以读取本地文件内容。
//2(1).首先实例化reader对象
var reader = new FileReader;
//2(2).读取this.files[0]文件里面的内容 readAsText(文件对象)
// reader.readAsText(this.files[0]);
//针对的是图片对象
reader.readAsDataURL(this.files[0]);
//3.把内容显示到页面内
//当这个文件的内容读取完毕之后，会把文件存到result里面
//reader对象已经读取完毕，而且读取到的内容已经存放到了result里面
reader.onload = function() {
//针对文件对象
// console.log(this.result);
// div.innerHTML = this.result;
//针对图片对象
img.src = this.result;
}
}
</script>
</body>
3.1 Files对象
由于HTML5中我们可以通过为表单元素添加multiple属性，因此我们通过上传文件后得到的是一个Files对象（伪数组形式）。
3.2FileReader对象
HTML5新增内建对象，可以读取本地文件内容。
var reader = new FileReader; 可以实例化一个对象
实例方法
1、readAsDataURL() 以DataURL形式读取文件
事件监听
onload 当文读取完成时调用
属性
result 文件读取结果
参考资料
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
4 地理定位
在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 (Location Base Service)
4.1 API详解
1、获取当前地理信息
navigator.geolocation.getCurrentPosition(successCallback, errorCallback)
2、重复获取当前地理信息
navigator. geolocation.watchPosition(successCallback, errorCallback)
当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。
position.coords.latitude 纬度
position.coords.longitude经度
position.coords.accuracy精度
position.coords.altitude海拔高度
当获取地理信息失败后，会调用errorCallback，并返回错误信息error
http://www.w3school.com.cn/html5/html_5_geolocation.asp
4.2 应用
在现实开发中，通过调用第三方API（如百度地图）来实现地理定位信息，这些API都是基于用户当前位置的，并将用位置位置（经/纬度）当做参数传递，就可以实现相应的功能。
http://lbsyun.baidu.com/ 百度地图api
5 拖拽
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
5.1 拖拽和释放
拖拽：Drag
释放：Drop
拖拽指的是鼠标点击源对象后一直移动对象不松手，一但松手即释放了
####1.哪个需要拖放，就给那个盒子设置可拖放效果
####2.找到源文件，设置拖拽效果（相关事件看5.2）
####3.找到目标文件，设置释放效果
5.2 设置元素为可拖放
draggable 属性：就是标签元素要设置draggable=true，否则不会有效果
注意： 链接和图片默认是可拖动的，不需要 draggable 属性。
5.2 拖拽API的相关事件
被拖动的源对象可以触发的事件：
(1)ondragstart：源对象开始被拖动
(2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)
(3)ondragend：源对象被拖动结束
拖动源对象可以进入到上方的目标对象可以触发的事件：
(1)ondragenter：目标对象被源对象拖动着进入
(2)ondragover：目标对象被源对象拖动着悬停在上方
(3)ondragleave：源对象拖动着离开了目标对象
(4)ondrop：源对象拖动着在目标对象上方释放/松手
拖拽API总共就是7个函数！！
5.3 DataTransfer
在进行拖放操作时，DataTransfer 对象用来保存被拖动的数据。它可以保存一项或多项数据、一种或者多种数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px;
}
div:nth-child(2) {
border: 1px solid green;
}
div:nth-child(3) {
border: 1px solid blue;
}
p {
height: 25px;
background-color: pink;
line-height: 25px;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
<p id="p1" draggable="true">拖拽内容1</p>
<p id="p2" draggable="true">拖拽内容2</p>
<p id="p3" draggable="true">拖拽内容3</p>
<p id="p4" draggable="true">拖拽内容4</p>
</div>
<div id="div2"></div>
<div id="div3"></div>
<script>
// 完整的拖拽 + 释放
// 1. 我们有很多盒子， 那个需要拖放 就 给这个盒子设置 可拖放效果
// 2. 找到源文件 设置拖拽效果
// (1)ondragstart：源对象开始被拖动
// var p = document.querySelector("#p1");
//var obj = null; 用于存放我们拖放对象 源对象
document.ondragstart = function(event) {
console.log("源对象开始被拖动");
// event.target 事件对象里面的事件目标
console.log(event.target.id);
//obj = event.target; 把当前对象给 obj 然后追加到 新目标对象里面就阔以了
// event.dataTransfer.setData("类型", 数据) 在我们start 里面设置 当我们开始拖拽的时候，就存储数据
// 类型 text/html URL
// 记录 当前源对象的id 名字
event.dataTransfer.setData("text/html", event.target.id);
// 我们传递的是 id 字符型形式 text
}
// (2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)
document.ondrag = function() {
console.log("源对象被拖动过程中");
// 不断的执行
}
// (3)ondragend：源对象被拖动结束
document.ondragend = function() {
console.log("源对象被拖动结束");
}
// 3. 找到目标对象 设置 释放效果 onmouseenter onmouseover
// var target = document.querySelector("#div2");
// (1)ondragenter：目标对象被源对象拖动着进入
document.ondragenter = function(event) {
console.log("目标对象被源对象拖动着进入");
console.log(event.target);
}
// (2)ondragover：目标对象被源对象拖动着悬停在上方
document.ondragover = function(e) {
console.log("目标对象被源对象悬停在上方");
// 不断的执行
// 如果想要触发 ondrop 事件 则需要在over 里面 阻止 默认行为
return false;
// e.preventDefault()
}
// (3)ondragleave：源对象拖动着离开了目标对象
document.ondragleave = function() {
console.log("离开了");
}
// (4)ondrop：源对象拖动着在目标对象上方释放/松手
document.ondrop = function(event) {
console.log("上方释放/松手");
// 当我们的源对象 在 目标对象上 释放 就可以吧 源对象放入目标对象里面了 追加
// 目标对象. appendChild(源对象)
// event.target.appendChild(obj);
// 拖拽的时候 ，不用删除原来的
// 获取 dataTransfer里面的数据
var id = event.dataTransfer.getData("text/html");
// console.log(id);
event.target.appendChild(document.getElementById(id));
// 因为我们追加的 源对象 p id 只是id名字， 需要 通过id 获取元素 追加到 目标对象里面
// 所以我们 document.getElementById(id)
}
</script>
</body>
</html>
6 Web存储
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。
6.1 特性
1、设置、读取方便、页面刷新不丢失数据
2、容量较大，sessionStorage约5M、localStorage约20M
4、只能存储字符串，可以将对象JSON.stringify() 编码后存储
6.2 window.sessionStorage
1、生命周期为关闭浏览器窗口
2、在同一个窗口(页面)下数据可以共享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="username"> <br /><br />
<button id="setData">设置数据</button>
<button id="getData">获取数据</button>
<button id="delData">删除数据</button>
<script>
var username = document.querySelector("#username");
// 点击按钮存取数据
// window.localStorage.setItem("age", 18);
// window.localStorage.setItem("address", "北京");
//
document.querySelector("#setData").onclick = function() {
// 点击之后得到 username 里面值
var val = username.value;
// 存储数据
// window.localStorage.setItem(key, value) 设置存储内容
window.localStorage.setItem("username", val);
}
// 点击按钮获得数据
document.querySelector("#getData").onclick = function() {
// 获得数据
// window.localStorage.getItem(key) 读取存储内容
alert(window.localStorage.getItem("username"));
}
3. // 删除数据
document.querySelector("#delData").onclick = function() {
// 获得数据
// window.localStorage.removeItem(key) 删除键值为key的存储内容
window.localStorage.removeItem("username");
// 删除所有的 数据
// window.localStorage.clear(); 这个清楚要慎用
}
</script>
</body>
</html>
6.3 window.localStorage
1、永久生效，除非手动删除 关闭页面也会存在
2、可以多窗口（页面）共享（同一浏览器可以共享）
6.4 方法详解
setItem(key, value) 设置存储内容
getItem(key) 读取存储内容
removeItem(key) 删除键值为key的存储内容
clear() 清空所有存储内容
6.5 其它
WebSQL、IndexDB
7 应用缓存
HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件。
7.1 优势
1、可配置需要缓存的资源
2、网络无连接应用仍可用
3、本地读取缓存资源，提升访问速度，增强用户体验
4、减少请求，缓解服务器负担
7.2 缓存清单
一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用.appcache为后缀名
例如我们创建了一个名为demo.appcache的文件，然后在需要应用缓存在页面的根元素(html)添加属性manifest=“demo.appcache”，路径要保证正确。
7.3 manifest文件格式*
1、顶行写CACHE MANIFEST
2、CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等
3、NETWORK: 换行 指定需要在线访问的资源，可使用通配符
4、FALLBACK: 换行 当被缓存的文件找不到时的备用资源
//study.appcache文件
CACHE MANIFEST
# 上面必须是第一行
CACHE:
#此部分写需要缓存的资源 （#是注释的意思）
./images/img1.jpg
./images/img2.jpg
./images/img3.jpg
./images/img4.jpg
NETWORK:
#此部分要写需要有网络才可访问的资源，无网络刚不访问
./images/img1.jpg
./images/img2.jpg
#*
FALLBACK:
#当访问不到某个资源的情况下，自动由另一个资源替换
./images/img4.jpg ./images/img5.jpg
<!DOCTYPE html>
<html lang="en" manifest="study.appcache">
<!-- study.appcache 引入 缓存清单 -->
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="images/img1.jpg" >
<img src="images/img2.jpg" >
<img src="images/img3.jpg" >
<img src="images/img4.jpg" >
</body>
</html>
7.4 其它
1、CACHE: 可以省略，这种情况下将需要缓存的资源写在CACHE MANIFEST
2、可以指定多个CACHE: NETWORK: FALLBACK:，无顺序限制
3、#表示注释，只有当demo.appcache文件内容发生改变时或者手动清除缓存后，才会重新缓存。
4、chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存
8 多媒体
方法：load()、play()、pause()
属性：currentSrc、currentTime、duration
事件：oncanplay， ontimeupdate，onended 等
[参考文档]
(http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp)
http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp