HTML5的這些api你知道嗎

2021-07-12 06:22:35 字數 2748 閱讀 1159

以下是之前學習的一些html5 api的總結,在html5中有許多功能和介面很值得我們去了解和學習。

頁面可見性api--page visbility

全屏api --full screen

獲取mediaapi--getusermedia

電池api --battery

資源預載入api--link prefetching

page visibility 頁面可見性api

page visibility的介紹

【document.hidden】 該值表示page是否是可見的,值為boolean值

【document.visibilitystate】 這個visibilitystate 可有三個值得可能:

【visible】 表示該page是處於最前面的頁面並且不是處於乙個最小化的視窗

【hidden】 表示該page不是處於最前面的頁面或者是處於乙個最小化的視窗

【prerender】 表示該頁面內容正在重新渲染並且該頁面對於使用者是不可見的

【isibilitychange event】*監聽window visibility 的改變的事件

// 設定隱藏屬性和可見改變事件的名稱,屬性需要加瀏覽器字首 // since some browsers only offer vendor-prefixed support var hidden, state, visibilitychange;

if (typeof document.hidden !== "undefined") else if (typeof document.mozhidden !== "undefined") else if (typeof document.mshidden !== "undefined") else if (typeof document.webkithidden !== "undefined") , false);

page visibility的用處

對於visibility的改變,我們可以怎麼用了做什麼呢。

我們可以對那些定期重新整理內容的頁面進行控制,當該頁面不可見則不重新整理,可見則重新整理

我們還可以根據頁面可見去計算我們**的使用者停留在本頁面的更為精確的資料,而不僅僅是開啟頁面而不停留在本頁面。

full screen api全屏api

該api允許開發者以程式設計方式將web應用程式全屏執行,使web應用程式更像本地應用程式。十分簡單有用的api.

full screen 的介紹

fullscreen 的api使用非常簡單,其有兩種模式

launching fullscreen mode 啟動全屏模式

// 找到適合瀏覽器的全屏方法 function launchfullscreen(element) else if(element.mozrequestfullscreen) else if(element.webkitrequestfullscreen) else if(document.mozcancelfullscreen) else if(document.webkitexitfullscreen) {

document.webkitexitfullscreen();

// cancel fullscreen for browsers that support it!

exitfullscreen();

full screen 的相關屬性和事件

目前fullscreen 仍存在相容的問題,許多能使用的瀏覽器仍需要在其相應的屬性和事件加相關的字首。

【document.fullscreenelement】 該屬性表示啟動全屏的元素(如 video這些)

【document.fullscreenenabled】該屬性表示當前是否全屏

【fullscreenchange 事件】 監聽全屏狀態改變的事件

2.2 full scrren 的相關

css有一些關於fullscreen的css屬性

:-webkit-full-screen,

:-moz-full-screen,

:-ms-fullscreen,

:full-screen {

/*pre-spec */

/* properties */

:fullscreen {

/* spec */

/* properties */

/* deeper elements */:-webkit-full-screen video {

width: 100%;

height: 100%;

/* styling the backdrop*/::backdrop {

/* properties */

::-ms-backdrop {

/* properties */

fullscreen的小結

第一次見到這個api是在看一些手機**和移動端漫畫**時,發現其有全屏的**的功能。全屏api目前可能存在相容性的問題,但相信不久的將來肯定會是乙個使用頻率超高的api

getusermedia api

該api允許web應用程式訪問攝像頭和麥克風,而無需使用外掛程式,該api在客戶端最先支援的,但在pc端仍不可用。

getusermedia api 的介紹

先閱讀下下面的html

當你做的是一種類似slideshow的網頁,需要提前載入近1-3張頁面(假設這些頁面並不大)

預先載入**搜尋的結果的頁面

HTML5開發,背後的事情你知道嗎?

現在的h5越來越受到企業或者是開發者的乙個大力的追捧,已經成為網路推廣必不可少的乙個使用的工具,相信還有很多朋友現在都不知道h5是個什麼東西,本文將為大家講的是關於h5一些分類的問題,讓你進一步的去學習開發,感興趣的朋友們可以關注了解一下。第二階段 屬於是互動式階段,讓使用者參與到製作中,這也是加大...

這些你都知道嗎?

如果身邊有胃不好的人,請分享給ta 1 最養胃的,麵條 2 如果熬粥,少放點蘇打進去,3 小公尺粥就饅頭,可以養胃。4 有兩種飲料應該多喝,一是牛奶,二是熱水。5 胃不好,要少食多餐。6 大棗 豆腐 白菜 牛奶 胡蘿蔔 健脾和胃。7 花生,蜂蜜都是養胃的。8 紅茶 蜂蜜.十分養胃。計 喝水 法 1 ...

這些python語句你知道嗎?

a i for i in range 1,5 print a 結果是 1,2,3,4 在用python寫 時,有時可能還沒想好函式怎麼寫,只寫了函式宣告,但為了保證語法正確,必須輸入一些東西,在這種情況下,我們會使用pass語句。def func args pass 同樣,break語句能讓我們跳出...