html5中的接口

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 >
        <p>
        <input type="button" value="全屏显示" >
        <input type="button" value="退出全屏" >
        <input type="button" value="是否全屏" >
</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="" >
        <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 >
        
</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>