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"
/> |