HTML5 -02- H5接口

红太狼 2021-12-14 03:57 202阅读 0赞

## 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 页面）