fullscreen API 接口

屬性1：fullscreenElement 該屬性返回當前處于全屏模式的DOM元素。

屬性2：fullscreenEnabled 該屬性返回當前 document 是否進入了可以請求全屏模式的狀態。

方法1：requestFullscreen() 請求進入全屏模式。

方法2：exitFullscreen() 退出全屏模式。

事件1：fullscreenchange 進入/退出全屏模式切換時會觸發。

事件2：fullscreenerror 進入/退出全屏模式失敗時會觸發。

由于fullscreen API 存在瀏覽器兼容性問題，所以我們在使用的時候需要進行跨瀏覽器處理，參考代碼：

跨瀏覽器返回正處于全屏的元素

function fullscreenElement(){

var fullscreenEle = document.fullscreenElement ||

document.mozFullScreenElement ||

document.webkitFullscreenElement;

//注意：要在用戶授權全屏后才能獲取全屏的元素，否則 fullscreenEle為null

console.log("全屏元素："+fullscreenEle);

return fullscreenEle;

}

跨瀏覽器返回當前 document 是否進入了可以請求全屏模式的狀態

function fullscreenEnable(){

var isFullscreen = document.fullscreenEnabled ||

window.fullScreen ||

document.webkitIsFullScreen ||

document.msFullscreenEnabled;

//注意：要在用戶授權全屏后才能準確獲取當前的狀態

if(isFullscreen){

console.log('全屏模式');

}else{

console.log('非全屏模式');

}

}

跨瀏覽器發動全屏

function lanchFullscreen(element){

if(element.requestFullscreen){

element.requestFullscreen();

}

else if(element.mozRequestFullScreen){

element.mozRequestFullScreen();

}

else if(element.msRequestFullscreen){

element.msRequestFullscreen();

}

else if(element.webkitRequestFullscreen){

element.webkitRequestFullScreen();

}

}

跨瀏覽器退出全屏

function exitFullscreen(){

if(document.exitFullscreen){

document.exitFullscreen();

}

else if(document.mozCancelFullScreen){

document.mozCancelFullScreen();

}

else if(document.msExitFullscreen){

document.msExiFullscreen();

}

else if(document.webkitCancelFullScreen){

document.webkitCancelFullScreen();

}

}

各瀏覽器fullscreenchange 事件處理

document.addEventListener('fullscreenchange', function(){ /*code*/ });

document.addEventListener('webkitfullscreenchange', function(){ /*code*/});

document.addEventListener('mozfullscreenchange', function(){ /*code*/});

document.addEventListener('MSFullscreenChange', function(){ /*code*/});

各瀏覽器fullscreenerror 事件處理

document.addEventListener('fullscreenerror', function(){ /*code*/ });

document.addEventListener('webkitfullscreenerror', function(){ /*code*/});

document.addEventListener('mozfullscreenerror', function(){ /*code*/);

document.addEventListener('MSFullscreenError', function(){ /*code*/ });

跨瀏覽器全屏模式下樣式代碼

:-webkit-full-screen { }

:-moz-full-screen { }

:-ms-fullscreen { }

:fullscreen { }

總結

以上是生活随笔為你收集整理的HTML5 API详解（1）:fullscreen全屏模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。