HTML5新增API

時間 2019-11-24

標籤 html5 html 新增 api 欄目 HTML5 简体版

原文原文鏈接

HTML5新增API

1. 檢查網絡鏈接狀態

舊版本：檢測網絡是否可用

經過window.navifator.onLine 來檢測網絡是否可用javascript

alert(window.navigator.onLine);
複製代碼

H5提供2個事件：online 和 offline

online: 用戶網絡鏈接時被調用 offline: 用戶網絡斷開時被調用css

//當網絡鏈接的時候，自動檢測，彈出P 顯示網絡已接通 而後消失
window.addEventListener("online",function () {
    $(".tips").text("網絡已接通").fadeIn(1000).delay(1000).fadeOut();
});

//當網絡斷開的時候，自動檢測，彈出P
window.addEventListener("offline",function () {
    $(".tips").text("網絡已斷開").fadeIn(1000).delay(1000).fadeOut();
});

//delay( fast | slow | 毫秒）表示延遲的時長
複製代碼

2. 全屏

HTML5規範容許用戶自定義網頁上任一元素全屏顯示。html

注：全屏存在瀏覽器的兼容性問題，不一樣的瀏覽器須要添加不一樣的前綴 webkit（谷歌） moz（火狐） ms（IE） o（歐朋）html5

2.1 全屏顯示

//1.全屏顯示
document.querySelector("#full").onclick = function () {
    div.webkitRequestFullScreen();  //開啓全屏
    //能力檢測 一個兼容性解決方法
    if(div.requestFullScreen){      //正常檢測
        div.requestFullScreen();
    }else if(div.webkitRequestFullScreen){  //谷歌
        div.webkitRequestFullScreen();
    }else if(div.mozRequestFullScreen){     //火狐
        div.mozRequestFullScreen();
    }else if(div.msRequestFullscreen){      //IE內核，注意IE中有坑，須要將Screen中的s小寫
        div.msRequestFullscreen(); //ms 裏面這樣寫的msRequestFullscreen S小寫
    }else {
        div.oRequestFullScreen();   //歐朋
    }
}
複製代碼

特別注意： 當兼容IE瀏覽器時，ms 裏面這樣寫的msRequestFullscreen S小寫java

2.2 取消全屏顯示

存在瀏覽器兼容問題，此處只列舉一種node

//2.取消全屏 跟元素是沒有關係的 與document相關
document.querySelector("#cancelFull").onclick = function () {
    document.webkitCancelFullScreen();
};
複製代碼

2.3 是否全屏顯示

存在瀏覽器兼容問題，此處只列舉一種git

//3.是不是全屏
document.querySelector("#isFull").onclick = function () {
    alert(document.webkitIsFullScreen);
}
複製代碼

2.4 全屏僞類選擇器

有兼容性問題須要添加前綴此處只列舉一種web

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

div:-webkit-full-screen{
     background-color: #4fff88;
}
複製代碼

3. 文件讀取

經過FileReader對象咱們能夠讀取本地存儲的文件，使用 File 對象來指定所要讀取的文件或數據。其中File對象能夠是來自用戶在一個元素上選擇文件後返回的FileList 對象，也能夠來自由拖放操做生成的 DataTransferapi

3.1 Files對象

因爲HTML5中咱們能夠經過爲表單元素添加multiple屬性，所以咱們經過<input type="file" multiple>上傳文件後獲得的是一個Files對象（僞數組形式）。

multiple: 表示能夠同時選擇多個上傳文件

3.2FileReader對象

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

var reader = new FileReader; 能夠實例化一個對象

readAsDataURL() 以DataURL形式讀取文件(用於圖片的顯示)
事件監聽：onload 當文讀取完成時調用
屬性：result 文件讀取結果

FileReader對象使用的參考資料

// 上傳文件，藉助於文件域 input file
var file = document.querySelector("#fl");
var div = document.querySelector("div");
file.onchange = function () {   //當發生改變的時候 （下拉菜單，select也是這個事件）
	//初始化一個reader對象
	var reader = new FileReader();
	//讀取文本里面的內容
	reader.readAsText(this.files[0]);
	// 把讀取的內容顯示到 頁面中
	reader.onload = function () {
		div.innerHTML = this.result;
	}
}

複製代碼

4 地理定位

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

4.1 API詳解

獲取當前地理信息

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

參考資料

w3school_HTML5 地理定位

4.2 應用

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

參考資料

百度地圖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：源對象拖動着在目標對象上方釋放/鬆手

5.3 DataTransfer

在進行拖放操做時，DataTransfer 對象用來保存被拖動的數據。它能夠保存一項或多項數據、一種或者多種數據類型參考文檔

DataTransfer的使用

// (1)ondragstart：源對象開始被拖動,存放被拖動元素的數據
document.ondragstart = function (event) {
	event.dataTransfer.setData("text/html",event.target.id);
}


// (4)ondrop：源對象拖動着在目標對象上方釋放/鬆手
// 獲取存儲的數據，進行追加到目標對象中
document.ondrop = function (event) {
    var id = event.dataTransfer.getData("text/html");
    event.target.appendChild(document.getElementById(id));
}
複製代碼