ng2 中的全屏与退出全屏

1.进入全屏

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();
  } else if(typeof window["ActiveXObject"] !=='undefined'){
    let aa = new ActiveXObject('WScript.Shell');
    if(aa != null){
      aa.SendKeys("{F11}")
    }
  }
}

调取全屏函数

launchFullScreen(document.documentElement); // 整个网页
launchFullScreen(document.getElementById("videoElement")); // 某个页面元素

2.退出全屏

exitFullscreen(element) {    
  if(element.exitFullscreen) {
    element.exitFullscreen();
  } else if(element.mozCancelFullScreen) {
    element.mozCancelFullScreen();
  } else if(element.webkitExitFullscreen) {
    element.webkitExitFullscreen();
  } else if(element.msExitFullscreen) {
    element.msExitFullscreen();
  } else if(typeof window["ActiveXObject"] !=='undefined'){ 
　　 let aa = new ActiveXObject('WScript.Shell'); 
　　 if(aa != null){ aa.SendKeys("{F11}") 
　}
}
/*
注意：退出全屏在ng2中不支持直接写document，如果不用形参的方式把document传进来而直接使用document.mozCancelFullScreen等函数时会报错
*/

调取退出全屏函数：

exitFullscreen(document);   //退出全屏只支持document来调取

3.判断全屏状态

fullscreenElement(element){
    return element.fullscreenElement || 
             element.mozFullScreenElement || 
             element.webkitFullscreenElement ||
             element.msFullscreenElement ||
             null;
} 

调取判读函数

fullscreenElement(document);  //此处会显示处于全屏的元素，如果没有处于全屏的，则为null

4.设置全屏下元素的样式

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

:-moz-full-screen {
  /* properties */
}

:-ms-fullscreen {
  /* properties */
}

:full-screen { /*pre-spec */
  /* properties */
}

:fullscreen { /* spec */
  /* properties */
}

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

 附上fullscreen官方网址：https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API