HTML5新增API

1 網絡狀态

我們可以通過window.navigator.onLine來檢測，使用者目前的網絡狀況，傳回一個布爾值，但是不同浏覽器會存在差異

是以HTML5 給我們提供了2個事件 online 和 offline

online使用者網絡連接配接時被調用

offline使用者網絡斷開時被調用

他們監聽的對象都是window

2 全屏

HTML5規範允許使用者自定義網頁上任一進制素全屏顯示。

1、Node.requestFullScreen() 開啟全屏顯示

2、Node.cancelFullScreen() 關閉全屏顯示

由于其相容性原因，不同浏覽器需要添加字首如：

webkit核心浏覽器：webkitRequestFullScreen、webkitCancelFullScreen，如chrome浏覽器。

Gecko核心浏覽器：mozRequestFullScreen、mozCancelFullScreen，如火狐浏覽器。

ms 微軟 msRequestFullscreen

3、document.fullScreen檢測目前是否處于全屏

不同浏覽器需要添加字首

document.webkitIsFullScreen、document.mozFullScreen

全屏僞類選擇器也有相容性問題需要添加字首思密達

:full-screen 、:-webkit-full-screen {}、:moz-full-screen {}

3 檔案讀取

我們想：可以吧上傳的檔案，内容顯示到頁面？或者上傳完畢圖檔顯示縮略圖到頁面上。。。

通過FileReader對象我們可以讀取本地存儲的檔案，使用 File 對象來指定所要讀取的檔案或資料。其中File對象可以是來自使用者在一個元素上選擇檔案後傳回的FileList 對象，也可以來自由拖放操作生成的 DataTransfer

3.1 Files對象

由于HTML5中我們可以通過為表單元素添加multiple屬性，是以我們通過上傳檔案後得到的是一個Files對象（僞數組形式）。

3.2FileReader對象

HTML5新增内建對象，可以讀取本地檔案内容。

var reader = new FileReader; 可以執行個體化一個對象

執行個體方法

1、readAsDataURL() 以DataURL形式讀取檔案

事件監聽

onload 當文讀取完成時調用

屬性

result 檔案讀取結果

參考資料

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

4 地理定位

在HTML規範中，增加了擷取使用者地理資訊的API，這樣使得我們可以基于使用者位置開發網際網路應用，即基于位置服務 (Location Base Service)

4.1 API詳解

1、擷取目前地理資訊

navigator.geolocation.getCurrentPosition(successCallback, errorCallback)

2、重複擷取目前地理資訊

navigator. geolocation.watchPosition(successCallback, errorCallback)

當成功擷取地理資訊後，會調用succssCallback，并傳回一個包含位置資訊的對象position。

position.coords.latitude 緯度

position.coords.longitude經度

position.coords.accuracy精度

position.coords.altitude海拔高度

當擷取地理資訊失敗後，會調用errorCallback，并傳回錯誤資訊error

http://www.w3school.com.cn/html5/html_5_geolocation.asp

4.2 應用

在現實開發中，通過調用第三方API（如百度地圖）來實作地理定位資訊，這些API都是基于使用者目前位置的，并将用位置位置（經/緯度）當做參數傳遞，就可以實作相應的功能。

http://lbsyun.baidu.com/ 百度地圖api

5 拖拽

在 HTML5 中，拖放是标準的一部分，任何元素都能夠拖放。

5.1 拖拽和釋放

拖拽：Drag

釋放：Drop

拖拽指的是滑鼠點選源對象後一直移動對象不松手，一但松手即釋放了

5.2 設定元素為可拖放

draggable 屬性：就是标簽元素要設定draggable=true，否則不會有效果

注意：連結和圖檔預設是可拖動的，不需要 draggable 屬性。

5.2 拖拽API的相關事件

被拖動的源對象可以觸發的事件：

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

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

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

拖動源對象可以進入到上方的目标對象可以觸發的事件：

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

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

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

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

拖拽API總共就是7個函數！！

5.3 DataTransfer

在進行拖放操作時，

DataTransfer

對象用來儲存被拖動的資料。它可以儲存一項或多項資料、一種或者多種資料類型

6 Web存儲

随着網際網路的快速發展，基于網頁的應用越來越普遍，同時也變的越來越複雜，為了滿足各種各樣的需求，會經常性在本地存儲大量的資料，HTML5規範提出了相關解決方案。

6.1 特性

1、設定、讀取友善、頁面重新整理不丢失資料

2、容量較大，sessionStorage約5M、localStorage約20M

4、隻能存儲字元串，可以将對象JSON.stringify() 編碼後存儲

6.2 window.sessionStorage

1、生命周期為關閉浏覽器視窗

2、在同一個視窗(頁面)下資料可以共享

6.3 window.localStorage

1、永久生效，除非手動删除關閉頁面也會存在

2、可以多視窗（頁面）共享（同一浏覽器可以共享）

6.4 方法詳解

setItem(key, value) 設定存儲内容

getItem(key) 讀取存儲内容

removeItem(key) 删除鍵值為key的存儲内容

clear() 清空所有存儲内容

6.5 其它

WebSQL、IndexDB

7 應用緩存

HTML5中我們可以輕松的建構一個離線（無網絡狀态）應用，隻需要建立一個cache manifest檔案。

7.1 優勢

1、可配置需要緩存的資源

2、網絡無連接配接應用仍可用

3、本地讀取緩存資源，提升通路速度，增強使用者體驗

4、減少請求，緩解伺服器負擔

7.2 緩存清單

一個普通文本檔案，其中列出了浏覽器應緩存以供離線通路的資源，推薦使用.appcache為字尾名

例如我們建立了一個名為demo.appcache的檔案，然後在需要應用緩存在頁面的根元素(html)添加屬性manifest=“demo.appcache”，路徑要保證正确。

7.3 manifest檔案格式*

1、頂行寫CACHE MANIFEST

2、CACHE: 換行指定我們需要緩存的靜态資源，如.css、image、js等

3、NETWORK: 換行指定需要線上通路的資源，可使用通配符

4、FALLBACK: 換行當被緩存的檔案找不到時的備用資源

7.4 其它

1、CACHE: 可以省略，這種情況下将需要緩存的資源寫在CACHE MANIFEST

2、可以指定多個CACHE: NETWORK: FALLBACK:，無順序限制

3、#表示注釋，隻有當demo.appcache檔案内容發生改變時或者手動清除緩存後，才會重新緩存。

4、chrome 可以通過chrome://appcache-internals/工具和離線（offline）模式來調試管理應用緩存

8 多媒體

方法：load()、play()、pause()

屬性：currentSrc、currentTime、duration

事件：oncanplay， ontimeupdate，onended 等

參考文檔

http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp