FullScreen API

8、全屏操作（FullScreen API）

全屏API可以控制浏览器全屏显示。

8.1 requestFullscreen()

Element节点的requestFullscreen方法，可以使得这个节点全屏。

function openFullscreen(elem){
  if (elem.requestFullscreen) {   
    elem.requestFullscreen();  
  } else if (elem.mozRequestFullScreen) {   
    elem.mozRequestFullScreen();  
  } else if (elem.webkitRequestFullscreen) {   
    elem.webkitRequestFullscreen();  
  }
}

openFullscreen(document.documentElement);   //整个页面全屏
openFullscreen(document.getElementById("videoElement");  //使播放器全屏

运行到这里，Gecko 与 WebKit 两个实现中出现了一个值得注意的区别：
Gecko 会为元素自动添加 CSS 使其伸展以便铺满屏幕： "width: 100%; height: 100%"。 WebKit 则不会这么做；它会让全屏的元素以原始尺寸居中到屏幕中央，其余部分变为黑色。
所以为了在 WebKit 下也达到与 Gecko 同样的全屏效果，你需要手动为元素增加 CSS 规则"width: 100%; height: 100%;"：

/* html */    
:-webkit-full-screen {}    

:-moz-fullscreen {}        

:fullscreen {}       

:-webkit-full-screen video {     
  width: 100%;     
  height: 100%;    
}  

8.2 exitFullscreen()

Document对象的exitFullscreen方法用于取消全屏。

function closeFullscreen(){
  if (document.exitFullscreen) {   
    document.exitFullscreen();  
  } else if (document.mozCancelFullScreen) {   
    document.mozCancelFullScreen();  
  } else if (document.webkitCancelFullScreen) {   
    document.webkitCancelFullScreen();  
  } else if (document.msExitFullscreen) {   
    document.msExitFullscreen();  
  }
}
closeFullscreen()

用户手动按下ESC键或F11键，也可以退出全屏键。此外，加载新的页面，或者切换tab，或者从浏览器转向其他应用（按下Alt-Tab），也会导致退出全屏状态。

8.3 全屏属性和事件

8.3.1 属性

document.fullscreenElement: 当前处于全屏状态的元素 element. document.fullscreenEnabled: 标记 fullscreen 当前是否可用.

var fullscreenElement = document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement;    

var fullscreenEnabled = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled;

8.3.2 全屏事件

fullscreenchange事件：浏览器进入或离开全屏时触发。
fullscreenerror事件：浏览器无法进入全屏时触发，可能是技术原因，也可能是用户拒绝。

document.addEventListener("fullscreenchange",function(){
  if(document.fullscreenElement){
    //进入全屏
  }else{
    //退出全屏
  }
},false);