h5的一些小擴展

（1）地理定位

在HTML規範中，增長了獲取用戶地理信息的API，這樣使得咱們能夠基於用戶位置開發互聯網應用，即基於位置服務 (Location Base Service)

• 獲取當前地理信息

navigator.geolocation.getCurrentPosition(successCallback, errorCallback) 

• 重複獲取當前地理信息

navigator. geolocation.watchPosition(successCallback, errorCallback)

• 當成功獲取地理信息後，會調用succssCallback，並返回一個包含位置信息的對象position。position.coords.latitude緯度position.coords.longitude經度position.coords.accuracy精度position.coords.altitude海拔高度

• 當獲取地理信息失敗後，會調用errorCallback，並返回錯誤信息error

• 在現實開發中，經過調用第三方API（如百度地圖）來實現地理定位信息，這些API都是基於用戶當前位置的，並將用位置位置（經/緯度）當作參數傳遞，就能夠實現相應的功能。

（2）離線應用

HTML5中咱們能夠輕鬆的構建一個離線（無網絡狀態）應用，只須要建立一個cache manifest文件。

• 優點

  • 一、可配置須要緩存的資源

  • 二、網絡無鏈接應用仍可用

  • 三、本地讀取緩存資源，提高訪問速度，加強用戶體驗

  • 四、減小請求，緩解服務器負擔

• 緩存清單

  • 一個普通文本文件，其中列出了瀏覽器應緩存以供離線訪問的資源，推薦使用.appcache爲後綴名

  • 例如咱們建立了一個名爲demo.appcache的文件，而後在須要應用緩存在頁面的根元素(html)添加屬性manifest="demo.appcache"，路徑要保證正確。

• manifest文件格式

  • 一、頂行寫CACHE MANIFEST

  • 二、CACHE: 換行 指定咱們須要緩存的靜態資源，如.css、image、js等

  • 三、NETWORK: 換行 指定須要在線訪問的資源，可以使用通配符

  • 四、FALLBACK: 換行 當被緩存的文件找不到時的備用資源

• 其它

  • 一、CACHE: 能夠省略，這種狀況下將須要緩存的資源寫在CACHE MANIFEST

  • 二、能夠指定多個CACHE: NETWORK: FALLBACK:，無順序限制

  • 三、#表示註釋，只有當demo.appcache文件內容發生改變時或者手動清除緩存後，纔會從新緩存。

  • 四、chrome 能夠經過chrome://appcache-internals/工具和離線（offline）模式來調試管理應用緩存

（3）文件讀取

HTML5新增內建對象，能夠讀取本地文件內容。

/*獲取到了文件表單元素*/
var file = document.querySelector('.file');
/*選擇文件後觸發*/
file.onchange = function () {
   /*初始化了一個文件讀取對象*/
   var reader = new FileReader();
   /*讀取文件數據  this.files[0] 文件表單元素選擇的第一個文件 */
   reader.readAsDataURL(this.files[0]);
   /*讀取的過程就至關於 加載過程 */
   /*讀取完畢  預覽 */
   reader.onload = function () {
       /*讀取完畢 base64位數據  表示圖片*/
       console.log(this.result);
      document.querySelector('#img').src = this.result;
​
   }
}

（4）h5拖拽

首先，爲了使元素可拖動，把 draggable 屬性設置爲 true ,

被拖動的源對象能夠觸發的事件：

(1) ondragstart：源對象開始被拖動

(2) ondrag：源對象被拖動過程當中(鼠標可能在移動也可能未移動)

(3) ondragend：源對象被拖動結束

拖動源對象能夠進入到上方的目標對象能夠觸發的事件：

(1) ondragenter：目標對象被源對象拖動着進入

(2) ondragover：目標對象被源對象拖動着懸停在上方

(3) ondragleave：源對象拖動着離開了目標對象

(4) ondrop：源對象拖動着在目標對象上方釋放/鬆手

（5）網絡狀態

• 咱們能夠經過window.navgator.onLine來檢測，用戶當前的網絡情況，返回一個布爾值

  • window.online用戶網絡鏈接時被調用

  • window.offline用戶網絡斷開時被調用