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 style="width: 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="width: 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>