DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> HTML5全屏(Fullscreen)API詳細介紹
HTML5全屏(Fullscreen)API詳細介紹
編輯:HTML5詳解     
這篇文章主要介紹了Html5全屏(Fullscreen)API詳細介紹,本文給出了啟動全屏模式和退出全屏模式代碼示例,同時講解了Fullscreen 屬性與事件,需要的朋友可以參考下

在越來越真實的web應用程序中,JavaScript也變得越來越給力.

FullScreen API 是一個新的JavaScript API,簡單而又強大. FullScreen 讓我們可以通過編程的方式來向用戶請求全屏顯示,如果交互完成,隨時可以退出全屏狀態.

在線演示Demo:  Fullscreen API Example

(在此Demo中,可以Launch ,Hide ,以及Dump顯示相關屬性,可以通過Chrome的控制台查看日志信息.)

啟動全屏模式

全屏API requestFullscreen方法在一些老的浏覽器裡面依然使用帶前綴形式的方法名,因此可能需要進行檢測判斷:
(帶前綴,意思就是各個浏覽器內核不通用.)

復制代碼代碼如下:
// 找到支持的方法, 使用需要全屏的 element 調用 
function launchFullScreen(element) { 
if(element.requestFullscreen) { 
element.requestFullscreen(); 
} else if(element.mozRequestFullScreen) { 
element.mozRequestFullScreen(); 
} else if(element.webkitRequestFullscreen) { 
element.webkitRequestFullscreen(); 
} else if(element.msRequestFullscreen) { 
element.msRequestFullscreen(); 




// 在支持全屏的浏覽器中啟動全屏 
// 整個頁面 
launchFullScreen(document.documentElement); 
// 某個元素 
launchFullScreen(document.getElementById("videoElement")); 

將需要全屏顯示的DOM元素作為參數,調用此方法即可讓window進入全屏狀態,有時候可能需要用戶同意(浏覽器自己和用戶交互),假若用戶拒絕,則可能出現各種不完全的全屏.

如果用戶同意進入全屏,那麼工具欄以及其他浏覽器組件會隱藏起來,使document框架的寬度和高度橫跨整個屏幕.

退出全屏模式

使用 exitFullscreen 方法可以使浏覽器退出全屏,返回原先的布局. 該方法在一些老的浏覽器上也是支持前綴方法.

復制代碼代碼如下:
// 退出 fullscreen 
function exitFullscreen() { 
if(document.exitFullscreen) { 
document.exitFullscreen(); 
} else if(document.mozExitFullScreen) { 
document.mozExitFullScreen(); 
} else if(document.webkitExitFullscreen) { 
document.webkitExitFullscreen(); 




// 調用退出全屏方法! 
exitFullscreen(); 

請注意: exitFullscreen 只能通過 document 對象調用 —— 而不是使用普通的 DOM element.

Fullscreen 屬性與事件

一個壞消息,到目前為止,全屏事件和方法依然是帶前綴的,好消息就是很快主流浏覽器就會都支持。

1.document.fullscreenElement:  當前處於全屏狀態的元素 element.
2.document.fullscreenEnabled:  標記 fullscreen 當前是否可用.

當進入/退出 全屏模式時,會觸發 fullscreenchange 事件:


復制代碼代碼如下:
var fullscreenElement = 
document.fullscreenEnabled 
|| document.mozFullscreenElement 
|| document.webkitFullscreenElement; 
var fullscreenEnabled = 
document.fullscreenEnabled 
|| document.mozFullscreenEnabled 
|| document.webkitFullscreenEnabled; 

在初始化全屏方法時,可以探測需要監聽哪一個事件.

Fullscreen CSS

浏覽器提供了一些有用的 fullscreen CSS 控制規則:

復制代碼代碼如下:
/* Html */ 
:-webkit-full-screen { 
/* propertIEs */ 

:-moz-fullscreen { 
/* propertIEs */ 



:fullscreen { 
/* propertIEs */ 



/* deeper elements */ 
:-webkit-full-screen video { 
width: 100%; 
height: 100%; 



/* styling the backdrop */ 
::backdrop { 
/* propertIEs */ 


在某些情況下,WebKit需要一些特殊處理,所以在處理多媒體時,你可能需要上面的代碼。

我認為 Fullscreen API 超級簡單,超級有用. 我首次見到這個 API 是在一個名為 MDN's BananaBread demo 的全客戶端第一人稱射擊游戲, 這真是一個使用全屏模式的絕佳案例。

全屏API提供了進入和退出全屏模式的方式,並提供相應的事件來監測全屏狀態的改變,所以各方面都連貫起來了.

請記住這個很好的API吧 —— 在未來的某個時刻,它肯定會派上用場!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved