如何使用HTML5實(shí)現(xiàn)全屏API

現(xiàn)在主流瀏覽器基本上實(shí)現(xiàn)了全屏效果，但是不同瀏覽器實(shí)現(xiàn)不一樣：

成都創(chuàng)新互聯(lián)是一家專業(yè)提供成縣企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、HTML5、小程序制作等業(yè)務(wù)。10年已為成縣眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

【進(jìn)入和退出全屏】

// Webkit (works in Safari5.1 and Chrome 15)

element.webkitRequestFullScreen();

document.webkitCancelFullScreen();

// Firefox 10+

element.mozRequestFullScreen();

document.mozCancelFullScreen();

// W3C 提議

element.requestFullscreen();

document.exitFullscreen();

//進(jìn)入全屏

function requestFullScreen() {

var de = document.documentElement;

if (de.requestFullscreen) {

de.requestFullscreen();

} else if (de.mozRequestFullScreen) {

de.mozRequestFullScreen();

} else if (de.webkitRequestFullScreen) {

de.webkitRequestFullScreen();

}

}

//退出全屏

function exitFullscreen() {

var de = document;

if (de.exitFullscreen) {

de.exitFullscreen();

} else if (de.mozCancelFullScreen) {

de.mozCancelFullScreen();

} else if (de.webkitCancelFullScreen) {

de.webkitCancelFullScreen();

}

}

//調(diào)用

document.body.addEventListener('click',function(){

requestFullScreen();

//5秒鐘自動(dòng)退出全屏

setTimeout(function(){

exitFullscreen();

},5000);

},false);

檢查全屏狀態(tài)變化 Detecting fullscreen state change

document.addEventListener("fullscreenchange", function () {

fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";

}, false);

document.addEventListener("mozfullscreenchange", function () {

fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";

}, false);

document.addEventListener("webkitfullscreenchange", function () {

fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";

}, false);

css的全屏樣式 Styling fullscreen

在css中，我們有幾個(gè)偽類來給全屏設(shè)置樣式，一般是 full-screen 這個(gè)偽類，然后會(huì)自動(dòng)再全屏的時(shí)候生效

html:-moz-full-screen {

background: red;

}

html:-webkit-full-screen {

background: red;

}

html:fullscreen {

background: red;

}

全屏狀態(tài)下的鍵盤輸入 Full screen with key input

為了安全原因，很多情況下全屏輸入都是被阻塞禁止的，但是chrome允許通過下面的API來允許鍵盤輸入

docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);

這個(gè)只在chrome支持，其他瀏覽器不支持。firefox計(jì)劃使用requestFullscreenWithKeys 方法來支持鼠標(biāo)輸入，但是會(huì)觸發(fā)用戶通知已保證安全。

firefox10以上，chrome 15和safari5.1以上都支持了。

html5定義中api是什么意思?

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

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

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

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

2、 Contacts API主要應(yīng)用在移動(dòng)設(shè)備上，為瀏覽器提供對(duì)用戶通用通訊錄的訪問。它在瀏覽器內(nèi)建立一個(gè)本地存儲(chǔ)庫，來存儲(chǔ)聯(lián)系人信息。而不是通過訪問讓你所有聯(lián)系人信息直接保存在Google +、Facebook或其他網(wǎng)站上, Contacts API將允許您有本地存儲(chǔ)庫,網(wǎng)站可以通過本地存儲(chǔ)庫訪問存儲(chǔ)的聯(lián)系人信息。現(xiàn)在的主流瀏覽器都支持Contacts API

3、 通過File API 瀏覽器可以直接訪問用戶計(jì)算機(jī)的沙箱區(qū)域?qū)?shù)據(jù)存儲(chǔ)到文件系統(tǒng)。

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

5、 允許瀏覽器請(qǐng)求用戶的位置信息，一旦獲權(quán),瀏覽器可以通過許多不同的方法來確定計(jì)算機(jī)或設(shè)備的實(shí)際位置，它將會(huì)有一個(gè)比例尺來確認(rèn)精確的地點(diǎn)位置。通過該API能獲取經(jīng)緯度等數(shù)據(jù),非常適合應(yīng)用程序定位。

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

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

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

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

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

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

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

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

什么是API?HTML5的API是什么?能通俗易懂點(diǎn)的?不要復(fù)制

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

新聞標(biāo)題：html5api,html5api接口代碼
文章出自：http://chinadenli.net/article33/dseepss.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、微信小程序、營(yíng)銷型網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)