HTML5 -02- H5接口

2HTML接口使用

2.1網絡接口

注：addEventListener() 方法用于向指定元素添加事件句柄。

提示： 使用 removeEventListener() 方法來移除 addEventListener() 方法添加的事件句柄。

例：

document.getElementById("myBtn").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
});
           

H5中網絡接口 

/*1.ononline:網絡連通的時候觸發這個事件*/
window.addEventListener("online",function(){
    alert("網絡連通了");
});

/*2.onoffline:網絡斷開時觸發*/
window.addEventListener("offline",function(){
    alert("網絡斷開了");
})
           

2.2全屏接口

全屏操作的主要方法和屬性
 1.requestFullScreen():開啟全屏顯示
   不同浏覽器需要添加不同的字首  chrome:webkit   firefox:moz   ie:ms   opera:o
 2.cancelFullScreen():退出全屏顯示:也添加字首，在不同的浏覽器下.退出全屏隻能使用document來實作
 3.fullScreenElement:是否是全屏狀态，也隻能使用document進行判斷
 
        div.requestFullScreen();
        div.webkitRequestFullScreen();
        div.mozRequestFullScreen();
        /*使用能力測試添加不同浏覽器下的字首*/
        if(div.requestFullScreen){
            div.requestFullScreen();
        }
           

2.3FileReader

2.3.1 FileReader:讀取檔案内容

* 1.1 readAsText():讀取文本檔案(可以使用Txt打開的檔案)，傳回文本字元串，預設編碼是UTF-8
* 1.2 readAsBinaryString():讀取任意類型的檔案。傳回二進制字元串。這個方法不是用來讀取檔案展示給使用者看，而是存儲檔案。例如：讀取檔案的内容，擷取二進制資料，傳遞給背景，背景接收了資料之後，再将資料存儲
* 1.3 readAsDataURL():讀取檔案擷取一段以data開頭的字元串，這段字元串的本質就是DataURL.DataURL是一種将檔案(這個檔案一般就是指圖像或者能夠嵌入到文檔的檔案格式)嵌入到文檔的方案。DataURL是将資源轉換為base64編碼的字元串形式，并且将這些内容直接存儲在url中>>優化網站的加載速度和執行效率。
* abort():中斷讀取  
           

2.3.2 讀取檔案，擷取DataURL

* 2.1.說明沒有任何的傳回值:void：但是讀取完檔案之後，它會将讀取的結果存儲在檔案讀取對象的result中
* 2.2.需要傳遞一個參數 binary large object:檔案(圖檔或者其它可以嵌入到文檔的類型)
* 2.3:檔案存儲在file表單元素的files屬性中，它是一個數組
           

2.3.3 讀取事件控制

* 3.1 Progress Events定義了與用戶端伺服器通信有關的事件-->e ||function(e) 
* 3.2 FileReader提供一個完整的事件模型，用來捕獲讀取檔案時的狀态,有以下進度事件
        * onabort:讀取檔案中斷片時觸發
        * onerror:讀取錯誤時觸發
        * onload:檔案讀取成功完成時觸發
        * onloadend:讀取完成時觸發，無論成功還是失敗
        * onloadstart:開始讀取時觸發
        * onprogress:讀取檔案過程中持續觸發
        -----------------------------------------------------------
                var reader=new FileReader();
                var file=document.querySelector("#myFile").files;
                reader.readAsDataURL(file[0]);
                reader.onload=function(){
                    //console.log(reader.result);
                    /*展示*/
                    document.querySelector("img").src=reader.result;
                }
        -----------------------------------------------------------        
           

2.4拖拽接口

在h5中，如果想拖拽元素，就必須為元素添加draggable="true". 圖檔和超連結預設就可以拖拽。

2.4.1 應用于被拖拽元素的事件

ondrag         應用于拖拽元素，整個拖拽過程都會調用--持續
     ondragstart    應用于拖拽元素，當拖拽開始時調用
     ondragleave    應用于拖拽元素，當滑鼠離開拖拽元素時調用
     ondragend      應用于拖拽元素，當拖拽結束時調用        
           

2.4.2 應用于目标元素的事件

ondragenter    應用于目标元素，當拖拽元素進入時調用
     ondragover     應用于目标元素，當停留在目标元素上時調用
     ondrop         應用于目标元素，當在目标元素上松開滑鼠時調用
     ondragleave    應用于目标元素，當滑鼠離開目标元素時調用    
    注：如果想觸發ondrop事件，那麼就必須在這個位置阻止浏覽器的預設行為
           

2.4.3 通過事件捕獲-|事件元參數|來擷取目前被拖拽的子元素

e.target.style.opacity=0.5;//透明度0.5
       e.target.parentNode.style.borderWidth="5px";//邊框加粗
       e.dataTransfer.setData("text/html", e.target.id);
    注1：通過dataTransfer來實作資料的存儲與擷取
              * setData(format,data):
              * format:資料的類型：text/html   text/uri-list
              * Data:資料:一般來說是字元串值
    注2：通過e.dataTransfer.setData存儲的資料，隻能在drop事件中擷取，進而避免使用全局變量
    注3：var id=e.dataTransfer.getData("text/html");
           

2.5地理定位接口

浏覽器會自動以最優方式去擷取使用者地理資訊

IP位址

三維坐标

i.GPS（Global Positioning System，全球定位系統）

ii.Wi-Fi

iii.手機信号

使用者自定義資料

2.5.1擷取地理資訊成功之後的回調

//navigator.geolocation.getCurrentPosition(success,error,option);

              success:當成功擷取地理位置資訊後，會調用。并傳回一個位置資訊的對象position
                     * position.coords.latitude 緯度
                     * position.coords.longitude 經度
                     * position.coords.accuracy 精度
                     * position.coords.altitude 海拔高度
              error：
              option:可以設定擷取資料的方式
                    * enableHighAccuracy:true/false:是否使用高精度
                    * timeout:設定逾時時間，機關ms
                    * maximumAge:可以設定浏覽器重新擷取地理資訊的時間間隔，機關是ms
           

2.5.2擷取地理資訊失敗之後的回調

2.5.3調整擷取目前地進資訊的方式

2.6 sessionStorage的使用

sessionStorage的使用：存儲資料到本地。存儲的容量5mb左右。

1. 這個資料本質是存儲在目前頁面的記憶體中-意味着其它頁面和浏覽器無法擷取資料
2. 它的生命周期為關閉目前頁面，關閉頁面，資料會自動清除

window.sessionStorage.setItem(key,value):存儲資料，以鍵值對的方式存儲
window.sessionStorage.getItem(key):擷取資料，通過指定名稱的key擷取對應的value值
window.sessionStorage.removeItem(key):删除資料，通過指定名稱key删除對應的值
window.sessionStorage.clear():清空所有存儲的内容
           

2.7 localStorage的使用

localStorage的使用：

1. 存儲的内容大概20mb
2. 不同浏覽器不能共享資料。但是在同一個浏覽器的不同視窗中可以共享資料
3. 永久生效，它的資料是存儲在硬碟上，并不會随着頁面或者浏覽器的關閉而清除.如果想清除，必須手動清除

window.localStorage.setItem(key,value):存儲資料，以鍵值對的方式存儲
window.localStorage.getItem(key):擷取資料，通過指定名稱的key擷取對應的value值
window.localStorage.removeItem(key):删除資料，通過指定名稱key删除對應的值
window.localStorage.clear():清空所有存儲的内容    
           

2.8 應用緩存

傳統：要麼緩存全部頁面，要麼不緩存。H5：支援部分緩存。
 
 CACHE MANIFEST – 開始
 CACHE - 在此标題下列出的檔案将在首次下載下傳後進行緩存
 NETWORK - 在此标題下列出的檔案需要與伺服器的連接配接，且不會被緩存
 FALLBACK - 在此标題下列出的檔案規定當頁面無法通路時的回退頁面（比如 404 頁面）