什么是API?HTML5的API是什么?能通俗易懂點的?不要復制

應用程序接口，開發(fā)程序的時候我們需要調用api，為什么需要調用api呢？因為很多系統的操作我們自己寫程序是完成不了的，這就需要調用人家寫好的方法，這個方法就是人家提供的api。比如獲取瀏覽器的版本，我們只要調用一個關于version方面的方法就可以得到版本信息，具體怎么得到的是人家在低層寫好的。HTML5同樣這個道理，什么getElementById();這些方法都成為api，如果人家不給你提供這個方法，你就沒法得到一個dom元素。所以說查api文檔，就是查那些人家寫好的方法。

創(chuàng)新互聯是一家集網站建設,平遠企業(yè)網站建設,平遠品牌網站建設,網站定制,平遠網站建設報價,網絡營銷,網絡優(yōu)化,平遠網站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯網需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網站。

網頁制作：HTML5 標準提供了哪些新的 API

以下是之前學習的一些HTML5 API的總結，在HTML5中有許多功能和接口很值得我們去了解和學習。

頁面可見性API--page Visbility

全屏API --full Screen

獲取MediaAPI--getUserMedia

電池API --battery

資源預加載API--link Prefetching

Page Visibility 頁面可見性API

該API可以用來檢測頁面對于用戶的可見性，即返回用戶當前瀏覽的頁面或標簽tap的狀態(tài)變化。 在最小化瀏覽器、切換tap頁面時生效.(如需對app中幾個webview進行切換操作時，可使用pageVisibility接口進行相應的事件監(jiān)聽和處理。)

page visibility的介紹

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

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

【visible】 表示該page是處于最前面的頁面并且不是處于一個最小化的窗口

【hidden】 表示該page不是處于最前面的頁面或者是處于一個最小化的窗口

【prerender】 表示該頁面內容正在重新渲染并且該頁面對于用戶是不可見的

【isibilitychange Event】*監(jiān)聽window visibility 的改變的事件

相關代碼：

// 設置隱藏屬性和可見改變事件的名稱，屬性需要加瀏覽器前綴 // 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"; } // 添加一個標題改變的監(jiān)聽器 document.addEventListener(visibilityChange, function(e) { // 開始或停止狀態(tài)處理 }, false);

page visibility的用處

對于visibility的改變，我們可以怎么用了做什么呢。

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

我們還可以根據頁面的是否可見來暫停和繼續(xù)音頻，視頻的播放

我們還可以根據頁面可見去計算我們網站的用戶停留在本頁面的更為精確的數據，而不僅僅是打開頁面而不停留在本頁面。

Full Screen API全屏API

該API允許開發(fā)者以編程方式將Web應用程序全屏運行，使Web應用程序更像本地應用程序。十分簡單有用的api.

Full Screen 的介紹

FullScreen 的API使用非常簡單，其有兩種模式

Launching Fullscreen Mode 啟動全屏模式

// 找到適合瀏覽器的全屏方法 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

Exit FullScreen Mode 退出全屏模式

// Whack fullscreenfunction exitFullscreen() { if(document.exitFullscreen) { document.exitFullscreen(); } else if(document.mozCancelFullScreen) { 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 事件】 監(jiān)聽全屏狀態(tài)改變的事件

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是在看一些手機小說和移動端漫畫網站時，發(fā)現其有全屏的觀看的功能。全屏api目前可能存在兼容性的問題，但相信不久的將來肯定會是一個使用頻率超高的api

getUserMedia API

該API允許Web應用程序訪問攝像頭和麥克風，而無需使用插件,該API在客戶端最先支持的，但在pc端仍不可用。

getUserMedia API 的介紹

先閱讀下下面的html

Snap Photo

相關JS代碼

// 設置事件監(jiān)聽器 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監(jiān)聽器 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);

一旦確定當前瀏覽器是支持getUserMedia的時， 我們可以同簡單的方法將當前我們的video元素的src視頻地址賦值給用戶手機本地的video，然后通過video的play方法拉起本地video的啟動和連接。這樣的話我們就可以使用本地的播放器來播放。

電池API（Battery API）

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

Battery 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); // 添加事件監(jiān)聽器 battery.addEventListener("chargingchange", function(e) { console.warn("Battery charge change: ", battery.charging); }, false);

為什么獲取電池信息的API

為什么我們需要用到battery api？現在許多移動端apps都內嵌著web瀏覽器包裝的（不再是完全native的應用）。所以我們需要一個方法去獲取系統的信息，app有一些過程是`十分耗電的，然后我們就需要在用戶啟動時給用戶一些警告信息告訴用戶當前設備電量較低。這是一個十分重要簡單的api.相應在不久的將來會發(fā)揮應有的作用。

Link Prefetching【預加載】

預加載網頁內容為瀏覽者提供一個平滑的瀏覽體驗。這個api我們在業(yè)務偶爾也會使用到

什么是link預加載

Link prefetching 是利用瀏覽器最佳的時間去下載或者預加載一些用戶可能將會在不久將來瀏覽的文檔的一種瀏覽器機制。

!-- full page --] [link rel="prefetch" href="" /] [!-- just an image --] [link rel="prefetch" href="" /]

什么時候使用link預加載是否在自己的網站使用預加載，可以參考一下幾點：

當你做的是一種類似slideshow的網頁，需要提前加載近1-3張頁面（假設這些頁面并不大）

預先加載在網站中許多網頁都會用到的圖片

預先加載網站搜索的結果的頁面

html5定義中api是什么意思?

api就是接口，html里面的api也不例外，也是些編程接口，是你訪問一些編碼指令和一些標準的一個接口一個集合，就跟插座一樣，是電和電器的一個接口。比如html5里面的canvas，是繪圖的一個api，html5獲取地理位置的api，即時通信的api，文件讀取api等等，通過這些api來訪問標準里面的指令編碼，來操縱相應的操作。

HTML5 中引入了哪些新的JavaScript API？具體有什么作用？

簡而言之,HTML5就是由新的標記引進的新元素形式和為現有元素新增的某些屬性，與新的JavaScript APIs的結合體。那HTML5中引入了新增加了哪些新標簽與JavaScript API結合體呢？我這里例舉了我們平時最常用的幾種：

1、 Canvas API是一個具有完整功能的JavaScript API并伴隨產生了新HTML5元素Canvas。通過Canvas API,您可以利用它和WebGL在瀏覽器中創(chuàng)建一個2 D或3 D繪圖場景，

2、 Contacts API主要應用在移動設備上，為瀏覽器提供對用戶通用通訊錄的訪問。它在瀏覽器內建立一個本地存儲庫，來存儲聯系人信息。而不是通過訪問讓你所有聯系人信息直接保存在Google +、Facebook或其他網站上, Contacts API將允許您有本地存儲庫,網站可以通過本地存儲庫訪問存儲的聯系人信息?，F在的主流瀏覽器都支持Contacts API

3、 通過File API 瀏覽器可以直接訪問用戶計算機的沙箱區(qū)域將數據存儲到文件系統。

4、 在HTML5中Forms API得到了發(fā)展，內置了驗證功能，在接下來的課程中,您將會學習到如何通過使用內置的規(guī)則實現表單驗證,以及如何添加自定義規(guī)則進行表單驗證。

5、 允許瀏覽器請求用戶的位置信息，一旦獲權,瀏覽器可以通過許多不同的方法來確定計算機或設備的實際位置，它將會有一個比例尺來確認精確的地點位置。通過該API能獲取經緯度等數據,非常適合應用程序定位。

6、 Media Capture的功能是將本地設備通過JavaScript將與瀏覽器相連。你將能夠訪問攝像頭,攝像頭,等等。

7、 Messaging API被用來與其他API一起使用，比如web web workers,這個我們將將在后面的課程中進一步討論。

8、 選擇(Selection)API的就像jQuery庫一樣運用非常廣泛。在流行jQuery 、HTML5的今天,試圖從文檔對象模型選擇元素是比較復雜的。jQuery彌補了這一差距。其實變得很容易，HTML5將高級選擇功能直接內置在瀏覽器中。使得瀏覽器的選擇性能得到很大的改善，甚至于JQuery選擇工具一樣速度。我并不是貶低jQuery。jQuery的優(yōu)勢就是DOM的選擇,但是,jQuery不僅僅只提供了選擇功能，事實上,在本課程中未來的演示的案例中,您將清楚的知道什么時候使用jQuery會更加便利,然后什么時候切換到本地選擇會更加方便。.

9、 Server-Sent Events API：一個網頁獲取新的數據通常需要發(fā)送一個請求到服務器,也就是向服務器請求的頁面.使用Server-Sent Events API,服務器可以在任何時刻向我們的web頁面推送數據和信息.這些被推送進來的信息可以在這個頁面上作為事件/數據來處理。服務器推送事件(Server-Sent Events)的優(yōu)點在于： 只要響應的內容類型是事件/數據流，事件就通過HTTP發(fā)送，瀏覽器能夠識別該傳輸。

10、 Web Notifications API即web消息提醒，它可以使頁面可以發(fā)出通知，通知將被顯示在頁面之外的系統層面上（通常使用操作系統的標準通知機制，但是在不同的平臺和瀏覽器上的表現會有差異）。這個功能使 web 應用可以向用戶發(fā)送信息，即使應用處于空閑狀態(tài)。最明顯的用例之一是一個網頁版電子郵件應用程序，每當用戶收到了一封新的電子郵件都需要通知用戶，即使用戶正在使用另一個應用程序。在2013年夏天，這個API還是在被W3C在試用，并沒有被很多瀏覽器所應用。

11、 Web Sockets API：Web Sockets是一種基于 ws 協議的技術，它使得建立全雙工連接成為可能。websocket 常見于瀏覽器中，但是這個協議不受使用平臺的限制。它允許你收發(fā)信息到服務器端。這個典型的示例就是即時通信。你建立一個對話，如果沒有sockets，你可能會去從服務器中去獲取新的消息。如果具有了sockets，當消息通過瀏覽器發(fā)到服務端的時候，對方的客戶端通過已經建立好的sockets鏈接就能自動的接收到信息。

12、 Web存儲，它有兩種版本,本地存儲和會話存儲。就WEB開發(fā)來說,一個會話就是你通過瀏覽器與服務器之間的一次通話，所以,如果你熟悉服務器端web開發(fā),會話存儲可能不是頭一次聽說?；旧?只要用戶頁在頁面上的統一個會話內，工作數據就不會丟失。如果瀏覽器關閉或者轉向另一個會話，那么此時數據就不復存在。本地存儲在不同會話之間仍然能保存數據, 本地存儲與cookie 和IndexedDB相比，它可以讓你來貯存更多的信息。Web存儲與cookie,數據不發(fā)送到請求的服務器而是保存在客戶端。

這些都是HTML5中新加入的一些比較常用的功能API，如果你想要系統的了解HTML5的新功能，推薦你去一個叫做秒秒學的教程網站上看看，里面有專門的課程來講解HTML5中的新特性，希望對你有幫助。