HTML5提供了一些非常強大的JavaScript和HTML API,來幫助開發者構建精彩的桌面和移動應用程序。本文將介紹5個新型的API,希望對你的開發工作有所幫助。
該API允許開發者以編程方式將Web應用程序全屏運行,使Web應用程序更像本地應用程序。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
// 找到適合瀏覽器的全屏方法 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可以用來檢測頁面對於用戶的可見性,即返回用戶當前瀏覽的頁面或標籤的狀態變化。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
// 設置隱藏屬性和可見改變事件的名稱,屬性需要加瀏覽器前綴 // 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 ); |
該API允許Web應用程序訪問攝像頭和麥克風,而無需使用插件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
// 設置事件監聽器 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 ); |
這是一個針對移動設備應用程序的API,主要用於檢測設備電池信息。
1
2
3
4
5
6
7
8
9
10
11
|
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 ); |
預加載網頁內容,爲瀏覽者提供一個平滑的瀏覽體驗。
1
2
3
4
5
|
<!-- full page --> <!-- just an image --> < link rel = "prefetch" href = "http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" /> |