H5新增的能力：网络监听、全屏、文件、拖拽

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第25天，点击查看活动详情

H5接口主要为移动开发而生，所以在PC端使用时可能存在兼容性问题，所以在使用时注意兼容性问题

一、网络监听：

1、网络连通时触发事件

window.addEventListener("online",function(){ 
    alert("网络连通了")
})

2、网络断开时触发事件

window.addEventListener("offline",function(){
    alert("网络断开了")
})

二、全屏接口

1、指定元素进入全屏状态

requestFullScreen函数可以实现让特定的元素全屏，但是该函数存在兼容性，最好添加前缀实现，一般如下：

var fullDom = document.getElementById("full")
if (fullDom.requestFullScreen) { 
    fullDom.requestFullScreen();
} else if (fullDom.webkitRequestFullScreen) {
    fullDom.webkitRequestFullScreen(); //通过浏览器前缀实现兼容性 
} else if (fullDom.msRequestFullScreen) { 
    fullDom.msRequestFullScreen();
} else if (this.mosRequestFullScreen) { 
    fullDom.mosRequestFullScreen(); 
} 

2、退出全屏状态

cancelFullScreen函数： 退出全屏是整个文档退出全屏，所以函数调用者应该是document，同样需要做兼容性处理

if (document.cancelFullScreen) { 
    document.cancelFullScreen(); 
} else if (document.webkitCancelFullScreen) { 
    document.webkitCancelFullScreen()
} else if (fullDom.msCancelFullScreen) { 
    document.msCancelFullScreen();
} else if (this.mosCancelFullScreen) { 
    document.mosCancelFullScreen(); 
} 

3、查询是否处于全屏状态

fullscreenElement属性： 是否全屏也是文档是否处于全屏状态，所以属性值在document上，同样需要做兼容性处理

 if (document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement || document.mosFullscreenElement) { 
     console.log(true); 
} else { 
    console.log(false);
}

三、文件读取接口：

通过FileReader对象，可以实现读取文件展示的效果

// 使用对象的第一步，肯定得实例化一个对象 
let fileReader = new FileReader(); 

通过对象的方法可以读取文件：

1、readAsText() 读取txt文本文件，返回值为文本字符串，默认编码为utf8

2、readAsBinaryString() 读取任意类型的文件，返回二进制字符串，通常用作数据传递和存储

3、readAsDataURL() 读取文件，获取DataURL字符串，这个字符串可以赋值给src属性，作为展示（没有返回值，需要通过事件才能拿到结果）

DataURl是将文件资源转为base64编码字符的形式

4、abort() 通过abort()来中断fileReader的读取行为

// 我们还得能拿到文件才行，这是一个 input:file 
let file = document.querySelector('#file'); 

var fileText = fileReader.readAsText(file.files[0]); 
var fileBinaryString = fileReader.readAsBinaryString(file.files[0]); 

readAsDataURL需要在 FileReader对象中的事件中获取到数据：

• onabort:读取中断是触发
• onerror:读取失败时触发
• onload:读取成功后触发
• onloadend:读取完成后触发(不论失败或成功)
• onloadstart:读取开始时触发
• onprogress:读取文件过程中持续触发

// 通过input控件选择文件后，通过属性把文件传递给读取函数： 
fileReader.readAsDataURL(file.files[0]); 

// 我们可以在 onload 事件中获取到数据，数据储存在 fileReader.result中 
fileReader.onload = function(){ 
    var dataUrl = fileReader.result;//获取数据 
    document.querySelector("img").src = dataUrl;//赋值给src属性 
}

四、拖拽接口

通过CSS3的新增属性 "draggable = ' true ' " ，标记某元素可以被拖拽

1、拖拽元素事件

• ondrag: 拖拽时持续触发

• ondragstart:拖拽开始时触发

• ondragleave:拖拽元素离开原位置时触发

• ondragend:拖拽结束后触发

2、目标元素事件

• ondragenter:当拖拽元素进入目标元素时触发

• ondragover:当拖拽元素位于目标元素上面时持续触发

• ondrop:当拖拽元素在目标元素上面松开时触发

• ondragleave:当拖拽元素离开目标元素时触发

实现某个元素的拖拽

<p id="drag" draggable="true">我是被拖拽元素</p>

<!-- 接收拖拽的容器 -->
<div id="dragBox"></div> 

//获取被拖拽元素，（允许被拖拽的元素） 

let dragDom = document.querySelector("#drag")

//添加拖拽元素事件 
dragDom.ondrag = function(){ console.log("ondrag")} 
dragDom.ondragstart = function(){ console.log("ondragstart") } 
dragDom.ondragleave = function(){ console.log("ondragleave") } 
dragDom.ondragend = function(){ console.log("ondragend") }

注意：浏览器默认会阻止拖拽，ondrap事件不生效，所以我们要在ondragover事件中阻止浏览器默认行为

let dragBox = dounment.querySelector("#dragBox")

//添加目标事件 
dragBox.ondragenter = function(){ console.log("dragenter") }
dragBox.ondragover = function(e){ 
    console.log("dragover") 
    e.preventDefault();
} 
dragBox.ondragleave = function(){ console.log("dragleave") } 

// 在该事件中为目标元素添加拖拽元素
dragBox.ondrop = function(){ 
    console.log("drop") 
    dragBox.appendChild(dragDom)
}

这种方式可以把指定元素拖拽到指定目标当中，如果想要拖拽到任何一个容器，那就需要给document添加事件：

把 拖拽元素 和 目标元素 都改为document，那么页面中所有的元素都可以拖拽，所有元素都视为目标元素，通过 函数 e 事件源参数可以获取相关参数（比如拖拽元素、目标元素）

//添加拖拽元素事件 
document.ondrag = function(e){ } 
document.ondragstart = function(e){ 
    console.log(e.target) //e.target为拖拽的元素 
    
    // 把拖拽元素储存在e事件源参数身上，参数一是存储的类型，参数二是储存的字符串 
    e.dataTransfer.setData("text/html", e.target.id) 
    
    // 因为在目标事件中的 e.target 为目标元素，
    // 而不是拖拽元素，所以我们要在开始拖动时保持拖动元素的值
} 

document.ondragleave = function(e){ } 

document.ondragend = function(e){ } 

//添加目标事件，在目标事件中，e.target 为目标元素 
document.ondragenter = function(e){ c
    onsole.log(e.target) //
} 

document.ondragover = function(e){ e.preventDefault(); } document.ondragleave = function(e){ } 

//从事件源参数 e 身上获取目标元素和拖拽元素 
document.ondrop = function(e){ 
    var id = e.dataTransfer.getData("text/html"); 
    e.target.appendChild(document.querySelector("#"+id))
}