详解HTML5中接口的使用
Updated:
一、 网络监听接口
网络连通时触发这个事件，只与当前页面有关（window）
- ononline:网络连通的时候触发这个事件
- onoffline:网络断开时触发
1
2
3
4
5
6
7
8/*1.ononline:网络连通的时候触发这个事件*/
window.addEventListener("online",function(){
alert("网络连通了");
});
/*2.onoffline:网络断开时触发*/
window.addEventListener("offline",function(){
alert("网络断开了");
})
二、全屏接口
- requestFullScreen():开启全屏显示
- 不同浏览器需要添加不同的前缀
- chrome:webkit firefox:moz ie:ms opera:o
- cancelFullScreen():退出全屏显示:也添加前缀，在不同的浏览器下.退出全屏只能使用document来实现
- fullScreenElement:是否是全屏状态，也只能使用document进行判断*/
例：对一张图片进行全屏显示，退出全屏和判断是否全屏1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57<body>
<div>
<img src="../images/l1.jpg" alt="">
<input type="button" id="full" value="全屏">
<input type="button" id="cancelFull" value="退出全屏">
<input type="button" id="isFull" value="是否全屏">
</div>
<script>
window.onload=function(){
var div=document.querySelector("div");
/*添加三个按钮的点击事件*/
/*全屏操作*/
document.querySelector("#full").onclick=function(){
/*添加不同浏览器下的前缀*/
if(div.requestFullScreen){
div.requestFullScreen();
}
else if(div.webkitRequestFullScreen){
div.webkitRequestFullScreen();
}
else if(div.mozRequestFullScreen){
div.mozRequestFullScreen();
}
else if(div.msRequestFullScreen){
div.msRequestFullScreen();
}
}
/*退出全屏*/
document.querySelector("#cancelFull").onclick=function(){
if(document.cancelFullScreen){
document.cancelFullScreen();
}
else if(document.webkitCancelFullScreen){
document.webkitCancelFullScreen();
}
else if(document.mozCancelFullScreen){
document.mozCancelFullScreen();
}
else if(document.msCancelFullScreen){
document.msCancelFullScreen();
}
}
/*判断是否是全屏状态*/
document.querySelector("#isFull").onclick=function(){
/*两个细节：使用document判断 能力测试*/
if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement){
alert(true);
}
else{
alert(false);
}
}
}
</script>
</body>
三、读取文件内容
FileReader:读取文件内容
- readAsText():读取文本文件(可以使用Txt打开的文件)，返回文本字符串，默认编码是UTF-8
- readAsBinaryString():读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看，而是存储文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据存储
- readAsDataURL():读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL
- DataURL是一种将文件(这个文件一般就是指图像或者能够嵌入到文档的文件格式)嵌入到文档的方案。
- DataURL是将资源转换为base64编码的字符串形式，并且将这些内容直接存储在url中>>优化网站的加载速度和执行效率。
FileReader提供一个完整的事件模型，用来捕获读取文件时的状态
- onabort:读取文件中断片时触发
- onerror:读取错误时触发
- onload:文件读取成功完成时触发
- onloadend:读取完成时触发，无论成功还是失败
- onloadstart:开始读取时触发
- onprogress:读取文件过程中持续触发
例： 从本地中选取一个图片，并做到即时预览的效果
注意：
src:指定路径(资源定位即使用url）src请求的是外部文件，一般来说是服务器资源。意味着它需要向服务器发送请求，它占用服务器资源
- 即时：当用户选择完图片之后就立刻进行预览的处理 >>onchange
- 预览：通过文件读取对象的readAsDataURL()完成
使用FileReader()获取DataURL
该函数需要注意： - 没有任何的返回值:void：但是读取完文件之后，它会将读取的结果存储在文件读取对象的result中
- 需要传递一个参数 binary large object:文件(图片或者其它可以嵌入到文档的类型)
- 文件存储在file表单元素的files属性中，它是一个数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30<body>
<form action="">
文件： <input type="file" name="myFile" id="myFile" onchange="getFileContent();"> <br>
<div></div>
<input type="submit">
</form>
<img src="" alt="">
<script>
var div=document.querySelector("div");
/* abort():中断读取*/
function getFileContent(){
/*1.创建文件读取对象*/
var reader=new FileReader();
/*2.读取文件，获取DataURL*/
var file=document.querySelector("#myFile").files;
reader.readAsDataURL(file[0]);
/*获取数据*/
reader.onload=function(){
//console.log(reader.result);
/*展示*/
document.querySelector("img").src=reader.result;
}
reader.onprogress=function(e){
var percent= e.loaded/ e.total*100+"%";
div.style.width=percent;
}
}
</script>
</body>
四、拖拽接口
在h5中，如果想拖拽元素，就必须为元素添加draggable=”true”. 图片和超链接默认就可以拖拽
应用于被拖拽元素的事件
- ondrag 应用于拖拽元素，整个拖拽过程都会调用–持续
- ondragstart 应用于拖拽元素，当拖拽开始时调用
- ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用
- ondragend 应用于拖拽元素，当拖拽结束时调用
应用于目标元素的事件
- ondragenter 应用于目标元素，当拖拽元素进入时调用
- ondragover 应用于目标元素，当停留在目标元素上时调用
- ondrop 应用于目标元素，当在目标元素上松开鼠标时调用
- ondragleave 应用于目标元素，当鼠标离开目标元素时调用
通过dataTransfer来实现数据的存储与获取
- setData(format,data):
- format:数据的类型：text/html text/uri-list
- Data:数据:一般来说是字符串值
例：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79<style>
*{
margin: 0;
padding: 0;
}
.div1{
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
margin-left:20px;
float: left;
}
.div2{
width: 200px;
height: 200px;
border: 1px solid blue;
position: relative;
margin-left:20px;
float: left;
}
.div3{
width: 200px;
height: 200px;
border: 1px solid green;
position: relative;
margin-left:20px;
float: left;
}
p{
background-color: orange;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="div1" id="div1">
<!--在h5中，如果想拖拽元素，就必须为元素添加draggable="true". 图片和超链接默认就可以拖拽-->
<p id="pe" draggable="true">试着把我拖过去</p>
<p id="pe1" draggable="true">试着也把我拖过去</p>
</div>
<div class="div2" id="div2"></div>
<div class="div3" id="div3"></div>
<script>
var obj=null;//当前被拖拽的地元素
document.ondragstart=function(e){
/*通过事件捕获来获取当前被拖拽的子元素*/
e.target.style.opacity=0.5;
e.target.parentNode.style.borderWidth="5px";
obj= e.target;
e.dataTransfer.setData("text/html", e.target.id);
}
document.ondragend=function(e){
e.target.style.opacity=1;
e.target.parentNode.style.borderWidth="1px";
}
document.ondragleave=function(e){
}
document.ondrag=function(e){
}
document.ondragenter=function(e){
console.log(e.target);
}
document.ondragover=function(e){
/*如果想触发ondrop事件，那么就必须在这个位置阻止浏览器的默认行为*/
e.preventDefault();
}
/*浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为*/
document.ondrop=function(e){
/*添加元素*/
//e.target.appendChild(obj);
/*通过e.dataTransfer.setData存储的数据，只能在drop事件中获取*/
var id=e.dataTransfer.getData("text/html");
e.target.appendChild(document.getElementById(id));
}
document.ondragleave=function(e){
}
</script>
</body>