浏览器全屏的方法及踩坑记录

weixin_45849565

已于 2024-03-30 15:11:56 修改

阅读量147

点赞数 1

文章标签： javascript 前端 vue.js

于 2024-03-30 15:02:32 首次发布

本文链接：https://blog.csdn.net/weixin_45849565/article/details/137173826

版权

解决全屏功能按钮与用户按F11和Esc按键冲突问题

<template>
   <div class="full_screen_box" @click="clickFullScreen">
      <img src="@/assets/images/suoxiao.png" alt v-if="fullScreenFlag" class="shrink" />
      <img class="enlarge" src="@/assets/images/fangda.png" alt v-else />
  </div>
</template>

<script setup>
import { ref,onMounted,onBeforeUnmount } from "vue";
const fullScreenFlag = ref(false);
  
const clickFullScreen = () => {
  const el = document.documentElement;
  // 如果是全屏，退出; 否则，进入全屏
  fullScreenFlag.value ? document.exitFullscreen() : el.requestFullscreen();
};
  
// 窗口事件
const resize = ()=>{
  fullScreenFlag.value = !!document.fullscreenElement;
}
  
// 键盘事件
const keyDown = (event) => {
  if (event.keyCode === 122) { // F11: 122
    // 由于F11全屏，window无法捕获fullscreenchange监听事件，故按F11时，执行我们自定义的全屏事件
    !fullScreenFlag.value && clickFullScreen(); // 如果为false，退出全屏
    event.returnValue = false; // 禁用F11
  } else if (event.keyCode === 27) { // Esc: 27
    fullScreenFlag.value && clickFullScreen(); // 如果为true，退出全屏
    event.returnValue = false; // 禁用Esc
  }
};


/* 页面初始化操作 */
onMounted(() => {
  window.addEventListener("resize", resize)
  window.addEventListener("keydown", keyDown);
});


// 页面卸载之前
onBeforeUnmount(() => {
  window.removeEventListener("resize", resize)
  window.removeEventListener("keydown", keyDown);
});

</script>