現在主流瀏覽器基本上實現了全屏效果，但是不同瀏覽器實現不一樣：
成都創(chuàng)新互聯(lián)是一家專業(yè)提供成縣企業(yè)網站建設,專注與成都做網站、網站設計、外貿營銷網站建設、HTML5、小程序制作等業(yè)務。10年已為成縣眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網站建設公司優(yōu)惠進行中。
【進入和退出全屏】
// Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();
// Firefox 10+
element.mozRequestFullScreen();
document.mozCancelFullScreen();
// W3C 提議
element.requestFullscreen();
document.exitFullscreen();
//進入全屏
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();
}
}
//調用
document.body.addEventListener('click',function(){
requestFullScreen();
//5秒鐘自動退出全屏
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中，我們有幾個偽類來給全屏設置樣式，一般是 full-screen 這個偽類，然后會自動再全屏的時候生效
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);
這個只在chrome支持，其他瀏覽器不支持。firefox計劃使用requestFullscreenWithKeys 方法來支持鼠標輸入，但是會觸發(fā)用戶通知已保證安全。
firefox10以上，chrome 15和safari5.1以上都支持了。
api就是接口，html里面的api也不例外，也是些編程接口，是你訪問一些編碼指令和一些標準的一個接口一個集合，就跟插座一樣，是電和電器的一個接口。比如html5里面的canvas，是繪圖的一個api，html5獲取地理位置的api，即時通信的api，文件讀取api等等，通過這些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主要應用在移動設備上，為瀏覽器提供對用戶通用通訊錄的訪問。它在瀏覽器內建立一個本地存儲庫，來存儲聯(lián)系人信息。而不是通過訪問讓你所有聯(lián)系人信息直接保存在Google +、Facebook或其他網站上, Contacts API將允許您有本地存儲庫,網站可以通過本地存儲庫訪問存儲的聯(lián)系人信息?，F在的主流瀏覽器都支持Contacts API
3、 通過File API 瀏覽器可以直接訪問用戶計算機的沙箱區(qū)域將數據存儲到文件系統(tǒng)。
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ā)出通知，通知將被顯示在頁面之外的系統(tǒng)層面上（通常使用操作系統(tǒng)的標準通知機制，但是在不同的平臺和瀏覽器上的表現會有差異）。這個功能使 web 應用可以向用戶發(fā)送信息，即使應用處于空閑狀態(tài)。最明顯的用例之一是一個網頁版電子郵件應用程序，每當用戶收到了一封新的電子郵件都需要通知用戶，即使用戶正在使用另一個應用程序。在2013年夏天，這個API還是在被W3C在試用，并沒有被很多瀏覽器所應用。
11、 Web Sockets API：Web Sockets是一種基于 ws 協(xié)議的技術，它使得建立全雙工連接成為可能。websocket 常見于瀏覽器中，但是這個協(xié)議不受使用平臺的限制。它允許你收發(fā)信息到服務器端。這個典型的示例就是即時通信。你建立一個對話，如果沒有sockets，你可能會去從服務器中去獲取新的消息。如果具有了sockets，當消息通過瀏覽器發(fā)到服務端的時候，對方的客戶端通過已經建立好的sockets鏈接就能自動的接收到信息。
12、 Web存儲，它有兩種版本,本地存儲和會話存儲。就WEB開發(fā)來說,一個會話就是你通過瀏覽器與服務器之間的一次通話，所以,如果你熟悉服務器端web開發(fā),會話存儲可能不是頭一次聽說?；旧?只要用戶頁在頁面上的統(tǒng)一個會話內，工作數據就不會丟失。如果瀏覽器關閉或者轉向另一個會話，那么此時數據就不復存在。本地存儲在不同會話之間仍然能保存數據, 本地存儲與cookie 和IndexedDB相比，它可以讓你來貯存更多的信息。Web存儲與cookie,數據不發(fā)送到請求的服務器而是保存在客戶端。
這些都是HTML5中新加入的一些比較常用的功能API，如果你想要系統(tǒng)的了解HTML5的新功能，推薦你去一個叫做秒秒學的教程網站上看看，里面有專門的課程來講解HTML5中的新特性，希望對你有幫助。
應用程序接口，開發(fā)程序的時候我們需要調用api，為什么需要調用api呢？因為很多系統(tǒng)的操作我們自己寫程序是完成不了的，這就需要調用人家寫好的方法，這個方法就是人家提供的api。比如獲取瀏覽器的版本，我們只要調用一個關于version方面的方法就可以得到版本信息，具體怎么得到的是人家在低層寫好的。HTML5同樣這個道理，什么getElementById();這些方法都成為api，如果人家不給你提供這個方法，你就沒法得到一個dom元素。所以說查api文檔，就是查那些人家寫好的方法。
重慶分公司
重慶分公司
