vue3点击按钮实现全屏和取消全屏效果

x_1999

已于 2024-01-15 10:59:46 修改

阅读量1.8k

点赞数 8

CC 4.0 BY-SA版权

文章标签：前端 javascript 开发语言

于 2024-01-15 09:56:33 首次发布

本文链接：https://blog.youkuaiyun.com/x_1999/article/details/135593731

本文介绍了在Chrome浏览器中fullscreenchange事件的不一致性和如何通过resize事件检测全屏状态。同时，针对F11键无法正常退出全屏的问题，提出用keydown事件取消F11默认行为并使用自定义方法解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

出现的问题1：用fullscreenchange监听全屏状态的改变时，发现在Chrome浏览器中，无法正确触发该事件，这个问题是由于Chrome浏览器的缺陷引起的。Chrome使用了Webkit引擎，在处理全屏模式时存在一些不一致性。具体来说，Chrome没有正确地实现fullscreenchange事件

解决办法：用resize替换，监听页面的resize事件，根据页面高度是否等于全屏高度判断是否处于全屏状态，具体代码如下：

<template>
   <el-button type="primary" @click="screen">{{ fullscreenText }}</el-button>
</template>

const fullscreen = ref(false)
const fullscreenText = ref('全屏')
if (window.innerHeight === window.screen.height) {
//判断初始化后，是否处于全屏状态
  fullscreen.value = true
  fullscreenText.value = '取消全屏'
}
onMounted(() => {
  //监听页面是否全屏，fullscreen为true代表全屏状态，
  window.addEventListener('resize', () => {
    if (window.innerHeight === window.screen.height) {
      //全屏
      fullscreen.value = true
      fullscreenText.value = '取消全屏'
    } else {
      fullscreen.value = false
      fullscreenText.value = '全屏'
    }
  })
})

具体点击全屏的代码：


const screen = () => {
  let element = document.documentElement;
  if (fullscreen.value) {
//退出全屏操作
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
    fullscreenText.value = '全屏'
  } else {
//全屏操作
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
      // IE11
      element.msRequestFullscreen();
    }
    fullscreenText.value = '取消全屏'
  }
//全屏状态取反
  fullscreen.value = !fullscreen.value;
}

出现的问题2:通过按钮点击进入的全屏，不能通过键盘F11退出，相反，通过键盘F11进入的全屏，也不能通过按钮点击退出，

解决方法：通过监听keydown事件，取消F11按钮默认事件，用js按钮点击方法代替，代码如下：

//解决按F11实现的全屏，用api不能退出问题,
//之前窗口对象window不能监听到keydowm事件，最好用文档对象document代替
document.addEventListener('keydown', e => {
  e = e || window.event
  if (e.keyCode === 122) {
    //取消f11按钮，用screen方法替代
    e.preventDefault()
    screen()
  }
})