难搞的需求

奇葩需求，登录系统后要默认全屏。

在实践一番之后发现一堆问题，有的至今没法解决，浏览器是不允许通过任何代码形式直接启动全屏的。

会经常看到控制台报错信息：

chunk-vendors.16ce8b76.js:39 Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

需要注意的是，点击登录按钮后，登录进去是全屏了，但是F5刷新后界面会全屏失败。

因为刷新时候没有触发用户事件，会有如上报错提示，而且错误还无法捕获。

领导还不信，关键是随便搜搜都这么说：https://blog.csdn.net/qq_33933205/article/details/107712531

你们能不能也帮我去说说，这小全屏真的搞麻了。

实现代码

抛开刷新不说，勉强还是实现了默认全屏，代码如下：

<div title="全屏" @click="isFullScreen = !isFullScreen">
  <i :class="['iconfont', isFullScreen ? 'icon-tuicqp' : 'icon-quanp']"></i>
</div>

isFullScreen: true, // 是否全屏

mounted () {
  // 监听窗口的大小变化给标识赋值，标识的改变再触发全屏的切换
  window.addEventListener('resize', function () {
    if (document.body.clientWidth === screen.width &&
      document.body.clientHeight === screen.height) {
      // 全屏
      that.isFullScreen = true
    } else {
      // 非全屏
      that.isFullScreen = false
    }
  })
},

watch: {
  isFullScreen: {
    handler (val) {
      if (this.isFullScreen) {
        this.openFullScreen()
      } else {
        this.closeFullScreen()
      }
    },
    immediate: true
  }
},

// 打开全屏
openFullScreen () {
  const de = document.documentElement
  if (de.requestFullScreen) {
    de.requestFullScreen()
  } else if (de.mozRequestFullScreen) {
    de.mozRequestFullScreen()
  } else if (de.webkitRequestFullScreen) {
    de.webkitRequestFullScreen(
      Element.ALLOW_KEYBOARD_INPUT
    )
  } else if (de.msRequestFullscreen) {
    de.msRequestFullscreen()
  }
},
// 关闭全屏
closeFullScreen () {
  if (document.cancelFullScreen) {
    document.cancelFullScreen()
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen()
  } else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen()
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen()
  }
},

代码的实现逻辑很简单：

• 一个全屏方法
• 一个关闭全屏方法
• 一个是否全屏的对象

在登录后的页面渲染完成后，mounted()种通过监听窗口resize的变化。

如果窗口高度=屏幕高度并且窗口宽度=屏幕宽度，证明是全屏，否则不是，监听屏幕变化时，修改的是全屏对象isFullScreen的值。

再通过监听这个isFullScreen值的变化，去调用对应的全屏方法或关闭全屏的方法。

实现过程中的问题记录

问题一：

F11的全屏和JS的全屏冲突：F11打开的全屏无法通过JS退出，需要再次按下F11键。

可以考虑禁用F11的全屏，F11无法打开全屏，但是可以退出全屏，代码如下：

window.addEventListener('keydown', function (e) {
  e = e || window.event
  if (e.keyCode === 122) {
    e.preventDefault()
  }
})

问题二：

一开始监听不到Esc键，所以考虑监听窗口的resize方法。

遗留问题

然而上述解决方案还是不完美，还有如下遗留问题：

1、默认登录进去是全屏了，但是F5刷新后界面会全屏失败，控制台有警告（因为没有用户点击事件代码控制全屏浏览器是不允许的），图标按钮切换了，但实际全屏未成功。
2、通过F11打开的全屏，点击图标按钮无法退出，会有提示信息请按Esc键，按了Esc键无反应，会有提示请按F11退出全屏。退出后的图标显示对应正常。
3、浏览器右上角有块区域无法点击，猜测可能是默认全屏和记住密码框冲突，导致有块区域无法点击，但尚未证实。