HTML5 -02- H5接口

2HTML接口使用

2.1网络接口

注：addEventListener() 方法用于向指定元素添加事件句柄。

提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

例：

document.getElementById("myBtn").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
});

H5中网络接口 

/*1.ononline:网络连通的时候触发这个事件*/
window.addEventListener("online",function(){
    alert("网络连通了");
});

/*2.onoffline:网络断开时触发*/
window.addEventListener("offline",function(){
    alert("网络断开了");
})

2.2全屏接口

全屏操作的主要方法和属性
 1.requestFullScreen():开启全屏显示
   不同浏览器需要添加不同的前缀  chrome:webkit   firefox:moz   ie:ms   opera:o
 2.cancelFullScreen():退出全屏显示:也添加前缀，在不同的浏览器下.退出全屏只能使用document来实现
 3.fullScreenElement:是否是全屏状态，也只能使用document进行判断
 
        div.requestFullScreen();
        div.webkitRequestFullScreen();
        div.mozRequestFullScreen();
        /*使用能力测试添加不同浏览器下的前缀*/
        if(div.requestFullScreen){
            div.requestFullScreen();
        }

2.3FileReader

2.3.1 FileReader:读取文件内容

* 1.1 readAsText():读取文本文件(可以使用Txt打开的文件)，返回文本字符串，默认编码是UTF-8
* 1.2 readAsBinaryString():读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看，而是存储文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据存储
* 1.3 readAsDataURL():读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL.DataURL是一种将文件(这个文件一般就是指图像或者能够嵌入到文档的文件格式)嵌入到文档的方案。DataURL是将资源转换为base64编码的字符串形式，并且将这些内容直接存储在url中>>优化网站的加载速度和执行效率。
* abort():中断读取  

2.3.2 读取文件，获取DataURL

* 2.1.说明没有任何的返回值:void：但是读取完文件之后，它会将读取的结果存储在文件读取对象的result中
* 2.2.需要传递一个参数 binary large object:文件(图片或者其它可以嵌入到文档的类型)
* 2.3:文件存储在file表单元素的files属性中，它是一个数组

2.3.3 读取事件控制

* 3.1 Progress Events定义了与客户端服务器通信有关的事件-->e ||function(e) 
* 3.2 FileReader提供一个完整的事件模型，用来捕获读取文件时的状态,有以下进度事件
        * onabort:读取文件中断片时触发
        * onerror:读取错误时触发
        * onload:文件读取成功完成时触发
        * onloadend:读取完成时触发，无论成功还是失败
        * onloadstart:开始读取时触发
        * onprogress:读取文件过程中持续触发
        -----------------------------------------------------------
                var reader=new FileReader();
                var file=document.querySelector("#myFile").files;
                reader.readAsDataURL(file[0]);
                reader.onload=function(){
                    //console.log(reader.result);
                    /*展示*/
                    document.querySelector("img").src=reader.result;
                }
        -----------------------------------------------------------        

2.4拖拽接口

在h5中，如果想拖拽元素，就必须为元素添加draggable="true". 图片和超链接默认就可以拖拽。

2.4.1 应用于被拖拽元素的事件

     ondrag         应用于拖拽元素，整个拖拽过程都会调用--持续
     ondragstart    应用于拖拽元素，当拖拽开始时调用
     ondragleave    应用于拖拽元素，当鼠标离开拖拽元素时调用
     ondragend      应用于拖拽元素，当拖拽结束时调用        

2.4.2 应用于目标元素的事件

     ondragenter    应用于目标元素，当拖拽元素进入时调用
     ondragover     应用于目标元素，当停留在目标元素上时调用
     ondrop         应用于目标元素，当在目标元素上松开鼠标时调用
     ondragleave    应用于目标元素，当鼠标离开目标元素时调用    
    注：如果想触发ondrop事件，那么就必须在这个位置阻止浏览器的默认行为

2.4.3 通过事件捕获-|事件元参数|来获取当前被拖拽的子元素

       e.target.style.opacity=0.5;//透明度0.5
       e.target.parentNode.style.borderWidth="5px";//边框加粗
       e.dataTransfer.setData("text/html", e.target.id);
    注1：通过dataTransfer来实现数据的存储与获取
              * setData(format,data):
              * format:数据的类型：text/html   text/uri-list
              * Data:数据:一般来说是字符串值
    注2：通过e.dataTransfer.setData存储的数据，只能在drop事件中获取，从而避免使用全局变量
    注3：var id=e.dataTransfer.getData("text/html");

2.5地理定位接口

浏览器会自动以最优方式去获取用户地理信息

IP地址

三维坐标

i.GPS（Global Positioning System，全球定位系统）

ii.Wi-Fi

iii.手机信号

用户自定义数据

2.5.1获取地理信息成功之后的回调

  //navigator.geolocation.getCurrentPosition(success,error,option);

              success:当成功获取地理位置信息后，会调用。并返回一个位置信息的对象position
                     * position.coords.latitude 纬度
                     * position.coords.longitude 经度
                     * position.coords.accuracy 精度
                     * position.coords.altitude 海拔高度
              error：
              option:可以设置获取数据的方式
                    * enableHighAccuracy:true/false:是否使用高精度
                    * timeout:设置超时时间，单位ms
                    * maximumAge:可以设置浏览器重新获取地理信息的时间间隔，单位是ms

2.5.2获取地理信息失败之后的回调

2.5.3调整获取当前地进信息的方式

2.6 sessionStorage的使用

sessionStorage的使用：存储数据到本地。存储的容量5mb左右。

1. 这个数据本质是存储在当前页面的内存中-意味着其它页面和浏览器无法获取数据
2. 它的生命周期为关闭当前页面，关闭页面，数据会自动清除

window.sessionStorage.setItem(key,value):存储数据，以键值对的方式存储
window.sessionStorage.getItem(key):获取数据，通过指定名称的key获取对应的value值
window.sessionStorage.removeItem(key):删除数据，通过指定名称key删除对应的值
window.sessionStorage.clear():清空所有存储的内容

2.7 localStorage的使用

localStorage的使用：

1. 存储的内容大概20mb
2. 不同浏览器不能共享数据。但是在同一个浏览器的不同窗口中可以共享数据
3. 永久生效，它的数据是存储在硬盘上，并不会随着页面或者浏览器的关闭而清除.如果想清除，必须手动清除

window.localStorage.setItem(key,value):存储数据，以键值对的方式存储
window.localStorage.getItem(key):获取数据，通过指定名称的key获取对应的value值
window.localStorage.removeItem(key):删除数据，通过指定名称key删除对应的值
window.localStorage.clear():清空所有存储的内容    

2.8 应用缓存

 传统：要么缓存全部页面，要么不缓存。H5：支持部分缓存。
 
 CACHE MANIFEST – 开始
 CACHE - 在此标题下列出的文件将在首次下载后进行缓存
 NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
 FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）