DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> 5 個強大的HTML5 API 函數推薦
5 個強大的HTML5 API 函數推薦
編輯:HTML5詳解     
本文給大家推薦了5個Html5的新型API函數,包括全屏API(Fullscreen API)、頁面可見性API(Page Visibility API)、getUserMedia API、電池API(Battery API)、 Link Prefetching。希望大家能有所了解,以方便自己使用。

Html5提供了一些非常強大的JavaScript和Html API,來幫助開發者構建精彩的桌面和移動應用程序。本文將介紹5個新型的API,希望對你的開發工作有所幫助。

  1.  全屏API(Fullscreen API)

  該API允許開發者以編程方式將Web應用程序全屏運行,使Web應用程序更像本地應用程序。


復制代碼代碼如下:
// 找到適合浏覽器的全屏方法 
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen(); 
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
// 啟動全屏模式 
launchFullScreen(document.documentElement); // the whole page
launchFullScreen(document.getElementById("videoElement")); // any individual element

  2.  頁面可見性API(Page Visibility API)

  該API可以用來檢測頁面對於用戶的可見性,即返回用戶當前浏覽的頁面或標簽的狀態變化。


復制代碼代碼如下:
// 設置隱藏屬性和可見改變事件的名稱,屬性需要加浏覽器前綴 
// since some browsers only offer vendor-prefixed support 
var hidden, state, visibilityChange; 
if (typeof document.hidden !== "undefined") { 
hidden = "hidden"; 
visibilityChange = "visibilitychange"; 
state = "visibilityState"; 
} else if (typeof document.mozHidden !== "undefined") { 
hidden = "mozHidden"; 
visibilityChange = "mozvisibilitychange"; 
state = "mozVisibilityState"; 
} else if (typeof document.msHidden !== "undefined") { 
hidden = "msHidden"; 
visibilityChange = "msvisibilitychange"; 
state = "msVisibilityState"; 
} else if (typeof document.webkitHidden !== "undefined") { 
hidden = "webkitHidden"; 
visibilityChange = "webkitvisibilitychange"; 
state = "webkitVisibilityState"; 

// 添加一個標題改變的監聽器 
document.addEventListener(visibilityChange, function(e) { 
// 開始或停止狀態處理 
}, false);

 
  3.  getUserMedia API

  該API允許Web應用程序訪問攝像頭和麥克風,而無需使用插件。


復制代碼代碼如下:
// 設置事件監聽器 
window.addEventListener("DOMContentLoaded", function() { 
// 獲取元素 
var canvas = document.getElementById("canvas"), 
context = canvas.getContext("2d"), 
video = document.getElementById("video"), 
videoObj = { "video": true }, 
errBack = function(error) { 
console.log("Video capture error: ", error.code); 
}; 
// 設置video監聽器 
if(navigator.getUserMedia) { // Standard 
navigator.getUserMedia(videoObj, function(stream) { 
video.src = stream; 
video.play(); 
}, errBack); 
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed 
navigator.webkitGetUserMedia(videoObj, function(stream){ 
video.src = window.webkitURL.createObjectURL(stream); 
video.play(); 
}, errBack); 

}, false);

  4.  電池API(Battery API)

  這是一個針對移動設備應用程序的API,主要用於檢測設備電池信息。


復制代碼代碼如下:
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery; 
// 電池屬性 
console.warn("Battery charging: ", battery.charging); // true 
console.warn("Battery level: ", battery.level); // 0.58 
console.warn("Battery discharging time: ", battery.dischargingTime); 
// 添加事件監聽器 
battery.addEventListener("chargingchange", function(e) { 
console.warn("Battery charge change: ", battery.charging); 
}, false);

  5.  Link Prefetching

  預加載網頁內容,為浏覽者提供一個平滑的浏覽體驗。


復制代碼代碼如下:
<!-- full page -->
<link rel="prefetch" href="<a href="http://davidwalsh.name/css-enhancements-user-experIEnce">http://davidwalsh.name/CSS-enhancements-user-experIEnce</a>" /> 
<!-- just an image -->

以上就是這5個新型的API了,小伙伴們了解了嗎,有什麼疑問請留言,大家一起討論,共同進步。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved