利用h requestFullscreen标签实现页面全屏

利用requestFulllscreen实现全屏操作

项目背景

开发了一个基于Echarts的dashBoard概要页面，因为是图标显示要求支持全屏操作，方便用户观看。

走过的弯路

1.先使用的是利用fixed布局,想在点击到全屏按钮后，利用ng-class给最外层盒子增加fixed属性，但这样尝试后只能实现浏览器内部的全屏，并不能实现整个屏幕的全屏。

position:fixed;
top:0;
bottom:0
right:0;
left:0

2.不要尝试直接在DOM中触发F11点击事件来实现，超越了浏览器能够执行的权限（我的猜想）。
3.需要在全屏时给盒子添加overFlow:scroll事件，才能够使得他正常进行滚动。

1.进入全屏

function full(ele) {
      if (ele.requestFullscreen) {
          ele.requestFullscreen();
      } else if (ele.mozRequestFullScreen) {
          ele.mozRequestFullScreen();
      } else if (ele.webkitRequestFullscreen) {
          ele.webkitRequestFullscreen();
      } else if (ele.msRequestFullscreen) {
          ele.msRequestFullscreen();
      }
}

ele：要全屏的元素，可以是document.body也可以是某一个div

2.exitFullScreen退出全屏

function exitFullscreen() {
    if(document.exitFullScreen) {
        document.exitFullScreen();
    } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if(document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if(document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

3.获取当前全屏的节点

function getFullscreenElement() {
    return (        
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullScreenElement ||
        document.webkitFullscreenElement||null
    );
}

4.判断当前是否全屏

function isFullScreen() {
  return  !! (
      document.fullscreen || 
      document.mozFullScreen ||                         
      document.webkitIsFullScreen ||       
      document.webkitFullScreen || 
      document.msFullScreen 
   );
}

5.判断当前文档是否能切换到全屏

function isFullscreenEnabled() {
    return  (
        document.fullscreenEnabled ||
        document.mozFullScreenEnabled ||
        document.webkitFullscreenEnabled ||
        document.msFullscreenEnabled
    );
}

补充

在后续的开发过程中又遇见了新的问题
1.google70版本之后会默认将fullScreen API的全屏界面背景展示为黑色，因此你需要把要展示的元素的背景色设置为你需要的背景颜色
2.注意区分这些字符的大小写（属实麻烦）
3.在fullscreen中可以利用fullscreenchange事件来监听是否全屏，只不过这里百度出来的都是直接监听fullscreen事件，实际上并不能生效。需要根据不同的浏览器增加特定的前缀。

document.addEventListener('webkitfullchange',()=>{

})

document.addEventListener('mozfullscreenchange',()=>{

})

需要注意的是上诉监听过程在angular中并不能呗$digest循环监听到，因此需要在执行函数中添加$scope.$apply(),使其立即生效。