ng2 中的全屏与退出全屏

最新推荐文章于 2022-03-16 15:30:28 发布

weixin_30399155

最新推荐文章于 2022-03-16 15:30:28 发布

阅读量114

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sghy/p/6837194.html

本文介绍了如何使用全屏API进行全屏操作，包括进入全屏、退出全屏、判断全屏状态及设置全屏样式的方法，并提供了具体示例。

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 {
  width: 100%;
  height: 100%;