1、网络监听接口
1)、ononline:网络连通时触发,window.addEventListener('online',function(){})
2)、onoffline:网络断开时触发,window.addEventListener('offline',function(){})
2、全屏接口
1)、requestFullScreen():开启全屏显示,有兼容问题,需要加上前缀:chrome:webkit,firefox:moz,ie;ms,opera:o
2)、cancelFullScreen():退出全屏显示,只能由document元素实现。
3)、fullScreenElement:属性,是否全屏显示,只能有document元素实现
<div style=" 500px;height: 500px;background:red;"> <p> <input type="button" value="全屏显示" id="full"> <input type="button" value="退出全屏" id="cancelFull"> <input type="button" value="是否全屏" id="isFull"> </p> </div> <script type="text/javascript"> window.onload=function(){ var div=document.querySelector("div") document.querySelector('input').onclick=function(){ if(div.requestFullscreen){ div.requestFullscreen(); }else if(div.webkitRequestFullScreen){ div.webkitRequestFullScreen(); }else if(div.mozRequestFullScreen){ div.mozRequestFullScreen(); } } document.querySelector("#cancelFull").onclick=function(){ if(document.cancelFullScreen){ document.cancelFullScreen(); }else if(document.mozCancelFullScreen){ document.mozCancelFullScreen(); }else if(document.webkitCancelFullScreen){ document.webkitCancelFullScreen() } } document.querySelector("#isFull").onclick=function(){ if(document.webkitFullScreenElement || document.mozFullScreenElement || document.msFullScreenElement){ alert(1) }else{ alert(2) } } } </script>
3、文件读取接口
FileReader:读取文件内容
1)、readAsText():读取文本文件,返回文本字符串,默认编码为utf-8
2)、readAsBinaryString():读取任意类型的文件,返回二进制字符串,用于存储文件。
3)、readAsDataURL():读取文件获取一段以data开头的字符串,这段字符串的本质是DatURL,是一种将文件(图像,能够嵌入到文档中的文件格式)嵌入到文档的方案。DataURL是将资源转换为base64编码的字符串形式,并将这些内容直接存储在url中,可以优化网站的加载速度和执行效率
4)、abort():中断读取
案例:即时预览
<form> <input type="file" name="" onchange="showPic()"> <img src="" id="img"> <input type="submit" value="submit" name=""> </form> <script type="text/javascript"> function showPic(){ var reader=new FileReader(); /*readAsDataURL:没有返回值,但是读取完后会将读取结果存储在文件读取对象的result中 需要传递一个参数(图片或其他可以嵌入到文档的类型) 文件存储在file表单元素的files属性中, */ var file=document.querySelector('input'); reader.readAsDataURL(file.files[0]); /*获取数据: onabort():读取中断时触发, onerror():读取错误时触发 onload():读取成功时触发 onloadend():读取完成时触发,无论成功还是失败 onloadstart():开始读取时触发, onprogress():读取文件过程中触发 */ reader.onload=function(){ document.querySelector("img").src=reader.result; } } </script>
4、拖拽接口
1)、拖拽元素支持事件:
ondrag:整个拖拽过程都会调用
ondragstart:当拖拽开始时调用
ondragleave:当鼠标离开拖拽元素时调用
ondragend:结束拖拽时调用
2)、目标元素支持事件
ondragenter:当拖拽元素进入时触发
ondragover:当停留在目标元素上时调用
ondrop:当在目标元素上松开鼠标时调用
ondragleave:鼠标离开目标元素时调用
5、地理位置接口
<div id="box" style=" 200px;height: 200px; border:1px solid red;"> </div> <script type="text/javascript"> window.onload=function(){ var box=document.querySelector("#box"); if(navigator.geolocation){ /* navigator.geolocation.getCurrentPosition(success,error,positon) success:成功后的回调函数, error:失败后的回调函数 positon:配置信息,主要包含: ( enableHightAccuracy 是否使用高精度 timeout:设置超时时间, maximunAge:可以设置浏览器重新获取地理位置信息的时间间隔,单位是ms ) */ navigator.geolocation.getCurrentPosition(onSuccess,onError,{enableHightAccuracy:true,timeout:10000,maximunAge:10000}) } } function onSuccess(position){ box.innerHTML="经度:"+position.coords.latitude+"维度:"+position.coords.longitude } function onError(err){ console.log(err) } </script>