HTML5之常见API
全屏
HTML5规范允许自定义网页上任意元素全屏显示
全屏API提供的一些常见方法：
requestFullscreen() //开启全屏显示
cancelFullscreen() //关闭全屏显示
在不同的浏览器中需要添加前缀（兼容性问题）
谷歌浏览器：webkitRequestFullscreen() 、webkitCancelFullscreen()
火狐浏览器：mozRequestFullscreen() 、mozCancelFullscreen()
document.fullscreen 检测当前是否处于全屏
谷歌浏览器：webkitIsFullscreen()
火狐浏览器：mozFullscreen()
全屏伪类
：full-screen{}
：webkit-full-screen{} 谷歌浏览器
：moz-full-screen{} 火狐浏览器
兼容性写法
//section是选中节点
if(section.requestFullscreen)
{
section.requestFullscreen();
}
else if(section.webkitRequestFullScreen())
{
section.webkitRequestFullScreen();
}
else if(section.mozRequestFullScreen)
{
section.mozRequestFullScreen();
}web存储
特点：
- 设置、读取数据方便
- 容量较大
- 只能存储字符串
window.sessionstorage（约5M）
特点：生命周期为一个网页的打开与关闭；在同一个窗口下，数据可以共享
window。localstorage（约20M）
特点：永久有效、除非手动删除；可以由多个窗口共享
方法详解（两种存储方式通用）
setItem(key,value) //设置存储内容
getItem(key) //读取存储内容
removeItem(key) //删除指定存储内容
clear() //清空存储内容网络状态
通过widow.online、window.offline来控制
可以为window添加一个事件
window.addEventListener("online",function());
window.addEventListener("offline",function());需注意：要是一开始就是断网或者联网，则函数不会执行
拖拽
方式：可以通过设置draggable=”true”来是元素可以进行拖拽，链接、图片默认是开启的。
拖拽元素：draggable=”true”的元素
目标元素：页面中任意一个元素都可以是目标元素
事件监听
拖拽元素：
- ondrag //整个拖拽过程都会调用
- ondragstart //拖拽开始时调用
- ondragleave //鼠标离开拖拽元素时调用
- ondragend //拖拽结束时调用
目标元素：
- ondragenter //拖拽元素进入目标元素时调用
- ondragover //拖拽元素停留在目标元素上时调用
- ondrop //在目标元素上松开鼠标时调用
注意：
selector.οndragοver=function(e){
e.preventDefault();
}
//拖拽时必用应用缓存
优势：
- 可配置需要缓存的资源
- 无网络情况下仍可使用应用
- 本地读取缓存资源，提升访问速度
- 减少请求，缓解服务器负担
- 可以轻松的构建一个离线应用
使用方式
构建一个文本文件以.appcache结尾，然后在html标签中引用
<html manifest="文件路径">
</html>文件书写格式
- 顶行写CACHE MANIFEST
- CACHE：指定我们需要缓存的静态资源，img、js、css
- NETWORK：需要我们联网才能访问的文件
- FALLBACK：当页面无法访问时返回的页面，比如404.html
地理定位
HTML5提供了获取地理信息的API，这使得我们可以基于用户地理位置开发互联网应用。
获取用户地理位置的几种方式
- IP地址（用于城市，代价比较大）
- GPS（比较精确）
- WIFI（在室内）
- 自定义数据（用户自己输入地理位置）
使用方式
if(window.navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(successCallBack,errorCallBack);
}
else{
console.log("error");
}
function successCallBack(position)
{
var wd=position.coords.latitude;
var jd=position.coords.longitude;
console.log(wd+"-------------------"+jd);
}
function errorCallBack(error){
console.log("wrong");
}
