Fullscreen全屏

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 { }