JS实现浏览器全屏F11

阅读目录

• 一、问题引入
• 二、解决方案
• 三、存在问题与解决方案

一、问题引入

预览图片时自动全屏

二、解决方案

document原生API获取全屏状态（document.fullscreen 已被弃用，可用document.fullscreenElement 只读属性返回当前页面中以全屏模式呈现的 Element，如果当前页面未使用全屏模式，则返回 null。）

手动打开/退出全屏代码如下：

function toggleFullScreen(flag) {
  if (flag) {
    var elem = document.documentElement; // 获取文档的根元素
    if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {  // 兼容不同浏览器
      // 检查是否已经是全屏模式
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.mozRequestFullScreen) { // Firefox
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
        elem.webkitRequestFullscreen();
      } else if (elem.msRequestFullscreen) { // IE/Edge
        elem.msRequestFullscreen();
      }
    }
  } else {
    if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {  // 兼容不同浏览器
      // 检查是否已经是全屏模式
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) { // Firefox
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) { // IE/Edge
        document.msExitFullscreen();
      }
    }
  }
}

同时，在触发全屏或退出全屏时（包括使用Esc、F11键退出），都会发出fullscreenchange事件。可在此做相关处理逻辑。

三、存在问题与解决方案

由于按Esc、F11也会退出全屏，且存在以下问题：

1. 不会修改document.fullscreenElement的值 例如没有调用过requestFullscreen()，按F11全屏后该值仍然是null
2. 全屏和退出时都不会发出fullscreenchange事件
3. 在按F11进入全屏时，会发出keydown事件，而退出全屏时则不会发出该事件
4. F11可以退出requestFullscreen()的全屏状态，但Esc、exitFullscreen()都不能退出F11的全屏状态

故F11会导致全屏按钮失效和状态混乱，解决方案也很简单，禁用原生F11全屏，只用requestFullscreen()；

document.onkeydown = (event) => {
        var e = event || window.event
        console.log('e.key', e.key);
        if (e.key === 'F11') {
          e.preventDefault()
          // this.$toggleFullScreen(true)
        }
      };

问题：由于第三点问题，在全屏状态下无法监听到F11/Esc键盘事件；关于第三点，可以理解为浏览器的安全机制，在全屏状态下ESC键被屏蔽了的，其它键都能触发。如果能监测到ESC，就可以想办法取消退出全屏了，那么对用户来讲全屏广告就退不出来了。

解决方案：通过resize这个原生监听视口宽度的方法 ，标识并判断document是否全屏

var isFull ;//用于标识当前屏幕是否为全屏
 
$(window).resize(function () {
    // 处理全屏状态下esc键监听失效
      if (isFull) {//如果是全屏
         isFull = false;//那么设置标识为退出全屏
         //处理函数  
  }  
}