HTML5--网络状态监听/全屏/fileReader/定位一(11)
这节主要学习HTML5中新增常用的API，包括网络状态监听、全屏、fileReader文件、定位、存储.....，很多接口在浏览器端存在兼容问题，需要进行兼容处理。
第一部分--网络状态监听接口
作用：判断当前的网络连接状态，根据网络状态进行相应的操作。
方法：
ononline：当网络连通时触发此事件
onoffline：当网络断开时触发此事件
<body>
<script>
window.addEventListener("online", function () {
alert("网络连通了");
});
window.addEventListener("offline", function () {
alert("网络断开了");
});
</script>
</body>
第二部分--全屏接口
作用：对元素/文档的全屏缩放操作的控制。
方法：
requestFullScreen：开启全屏显示，不同的浏览器需要添加不同的前缀。
cancelFullScreen：退出全屏显示，不同浏览器需要添加不同的前缀，只能用document调用(是整个文档退出，而非某个元素退出，所以需要用document调用)
fullScreenElement：判断是否处于全屏状态，也只能用document调用。
<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()：读取文本文件内容，返回字符串，默认编码是UTF-8.
readAsBinaryString()：读取任意类型文件内容，返回二进制字符串。此方法不是用来读文件给用户看，而是存储文件。例如：前端读取文件内容，获取二进制数据，传递给后台，后台接收了数据并将数据存储。
readAsDataURL()：读取文件获得以data开头的字符串，字符串的本质就是DataURL，
DataURL是将资源转换为base64编码的字符串形式，并且将这些内容直接存储在url中。
abort()：中止读取。
举例：即时预览
<head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height: 20px; width: 0%; background-color:red; } </style> </head> <body> <form action=""> 文件： <input type="file" name="myFile" id="myFile"> <br> <div></div> <input type="submit"> </form> <img src="" alt=""> <script> var div=document.querySelector("div"); function getFileContent(){ /!*1.创建文件读取对象*!/ var reader=new FileReader(); /* /!*2.读取文件，获取DataURL * 2.1.说明没有任何的返回值:void：但是读取完文件之后，它会将读取的结果存储在文件读取对象的result中 * 2.2.需要传递一个参数 binary large object:文件(图片或者其它可以嵌入到文档的类型) * 2.3:文件存储在file表单元素的files属性中，它是一个数组*!/ */ var file=document.querySelector("#myFile").files; reader.readAsDataURL(file[0]); /!*获取数据*!/ /* /!*FileReader提供一个完整的事件模型，用来捕获读取文件时的状态 * onabort:读取文件中断片时触发 * onerror:读取错误时触发 * onload:文件读取成功完成时触发 * onloadend:读取完成时触发，无论成功还是失败 * onloadstart:开始读取时触发 * onprogress:读取文件过程中持续触发*!/ */ reader.onload=function(){ /!*展示*!/ document.querySelector("img").src=reader.result; } reader.onprogress = function (e) { //var percent= e.loaded/ e.total*100+"%"; console.log(e); div.style.width = percent; }; } </script> </body>
第四部分--地理定位接口
作用：获取用户的地理位置信息，可以基于用户的位置开发基于位置服务的应用。
注意：浏览器自动选择定位方式，我们无法设置浏览器的定位方式，浏览器默认不允许获取当前用户的位置信息，可以手动设置在设置--高级设置--内容设置--位置(chrome)。
对象1：Geolocation：使用navigator.geolocation获取
方法1：getCurrentPosition(success， [error]， option)：获取当前用的地理信息。
参数：
success：获取地理信息成功后执行的回调。
error：获取地理信息失败后执行的回调。
option：设置获取当前地理信息的方式。
选项：enableHighAccuracy:true/false:是否使用高精度
timeout:设置超时时间，单位ms
maximumAge:可以设置浏览器重新获取地理信息的时间间隔，单位是ms
方法2：watchPosition(success， [error]， option)：循环监听用户的地理信息。
方法3：clearWatch()：清除用户信息监听实例。
<head> <meta charset="UTF-8"> <title>Title</title> <style> .de{ width: 300px; height: 300px; border: 1px solid #ddd; } </style> </head> <body> <div id="demo" class="de"></div> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { /* /!*option:可以设置获取数据的方式 * enableHighAccuracy:true/false:是否使用高精度 * timeout:设置超时时间，单位ms * maximumAge:可以设置浏览器重新获取地理信息的时间间隔，单位是ms*!/ */ navigator.geolocation.getCurrentPosition(showPosition,showError,{ enableHighAccuracy:true, //使用高精度 timeout:3000 //超时时间设置3s }); } else{ x.innerHTML="Geolocation is not supported by this browser."; } } /* 成功获取定位之后的回调 如果获取地理信息成功，会将获取到的地理信息传递给成功之后的回调 */ // position.coords.latitude 纬度 // position.coords.longitude 经度 // position.coords.accuracy 精度 // position.coords.altitude 海拔高度 function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } // 获取定位失败之后的回调 function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } } getLocation(); </script>
第三方地图接口使用：
在需要地图功能时，我们考虑使用第三方平台(百度地图或其他的第三方接口)
步骤：打开百度地图首页--->地图开放平台(底部)--->开发文档，然后可以着手尝试了。(要申请授权码)
举例：普通地图和全景图
<head> <title>普通地图&全景图</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 此处的ak就是我们申请的秘钥 --> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DarF2LCCGzn6T16zgy8ZPkvYYE5CT6fu"></script> <style type="text/css"> body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} #panorama {height: 50%;overflow: hidden;} #normal_map {height:50%;overflow: hidden;} </style> </head> <body> <div id="panorama"></div> <div id="normal_map"></div> <script type="text/javascript"> //全景图展示 var panorama = new BMap.Panorama('panorama'); panorama.setPosition(new BMap.Point(116.404125,39.91405)); //根据经纬度坐标展示全景图 panorama.setPov({heading: -40, pitch: 6}); panorama.addEventListener('position_changed', function(e){ //全景图位置改变后，普通地图中心点也随之改变 var pos = panorama.getPosition(); map.setCenter(new BMap.Point(pos.lng, pos.lat)); marker.setPosition(pos); }); //普通地图展示 var mapOption = { mapType: BMAP_NORMAL_MAP, maxZoom: 18, drawMargin:0, enableFulltimeSpotClick: true, enableHighResolution:true } var map = new BMap.Map("normal_map", mapOption); var testpoint = new BMap.Point(116.404125,39.91405); map.centerAndZoom(testpoint, 18); var marker=new BMap.Marker(testpoint); marker.enableDragging(); map.addOverlay(marker); map.enableScrollWheelZoom(true); map.addControl(new BMap.MapTypeControl()); marker.addEventListener('dragend',function(e){ panorama.setPosition(e.point); //拖动marker后，全景图位置也随着改变 panorama.setPov({heading: -40, pitch: 6});} ); </script> </body>
