实现指定区域的全屏功能

一、需求描述：需要实现指定区域进行全屏显示

二、方法API：

1、通过浏览器提供的方法（有浏览器差异）调用浏览器的进入/退出全屏功能；

浏览器	方法名	备注
	requestFullscreen  --开始全屏显示 exitFullscreen  --取消全屏显示
谷歌	webkitRequestFullscreen  --开始全屏显示 webkitCancelFullscreen  --取消全屏显示	新版本的
火狐	mozRequestFullscreen  --开始全屏显示 mozCancelFullscreen  --取消全屏显示
IE	msRequestFullscreen  --开始全屏显示 msExitFullscreen  --取消全屏显示

 

 

 

 

 

 

 

 

//实现指定DOM全屏的功能
private fullWindowSize() {
    let maxViewDom: any = document.getElementById('maxView');
    if (maxViewDom.requestFullscreen) {
      maxViewDom.requestFullscreen();
    }
    else if (maxViewDom.msRequestFullscreen) {
      maxViewDom.msRequestFullscreen();
    }
    else if (maxViewDom.mozRequestFullScreen) {
      maxViewDom.mozRequestFullScreen();
    }
    else if (maxViewDom.webkitRequestFullScreen) {
      maxViewDom.webkitRequestFullScreen();
    }
  }

2、使用document.fullscreenEnabled 方法判断浏览器是否支持Fullscreen API （true支持；false不支持）

三、全屏显示的使用注意点：

 1、遇见报错：TypeError: fullscreen error

原因：浏览器触发全屏显示必须是用户行为（比如用户点击按钮、路由跳转等），不能自动全屏。

2、通过document.webkitIsFullScreen判断当前是否是全屏，true-已进入全屏；false-已退出全屏