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>