原生JS点击图标全屏esc、f11退出全屏

原创

于 2018-09-29 17:03:54 发布 · 4.1k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了一种使用原生JS实现点击图标全屏及通过ESC和F11键退出全屏的方法。在Mac系统上运行正常，但在Windows系统中存在一些问题，期待解决方案。

这样写在mac系统上功能是完好的
但是win系统上有问题，我也不知道为什么，求解答。
html部分：

<span>
      <el-tooltip effect="dark" :content="fullscreen ? '取消全屏' : '全屏'" placement="bottom">
        <i class="iconfont iconfont14" @click="handleFullScreen" :class="fullscreen ? 'icon-suoxiao1' : 'icon-fullscreen'"></i>
      </el-tooltip>
      </span>

js部分：

handleFullScreen () { // 全屏
      let element = document.documentElement
      if (this.fullscreen) {
        this.exitFull()
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen()
        }
      }
      this.fullscreen = !this.fullscreen 
      window.onresize = ()