js:浏览器全屏与退出全屏功能

最新推荐文章于 2024-05-30 11:27:58 发布

一天只码五十行

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量147

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_45820271/article/details/138961023

版权

一、JS文件

// 进入全屏
export function enterFullScreen(element) {
  try {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  } catch (error) {
    console.error("无法全屏:", error);
  }
}

// 退出全屏
export function exitFullScreen() {
  try {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  } catch (error) {
    console.error("Failed to exit full screen:", error);
  }
}

// 获取当前处于全屏的元素
export function getFullScreenElement() {
  return (
    document.fullscreenElement ||
    document.mozFullScreenElement ||
    document.webkitFullscreenElement ||
    document.msFullscreenElement
  );
}

// 判断当前是否处于全屏状态
export function isFullScreen() {
  return (
    !!document.fullscreenElement ||
    document.mozFullScreen ||
    document.webkitIsFullScreen ||
    document.msFullscreenElement
  );
}

// 切换全屏状态
export function toggleFullScreen(targetElement) {
  if (isFullScreen()) {
    exitFullScreen();
  } else {
    enterFullScreen(targetElement);
  }
}

二、TS声明（如果使用TS）

export function enterFullScreen(element: Element): void;
export function exitFullScreen(): void;
export function getFullScreenElement(): Element | null;
export function isFullScreen(): boolean;
export function toggleFullScreen(targetElement: Element): void;

三、使用(例如在vue组件中)

<template>
  <div class="quanpingBox" @click="toggleFullScreen(ele)">
    <svg
      t="1715831699074"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="2413"
      width="40"
      height="40"
    >
      <path
        d="M896 128v288c0 19.2-12.8 32-32 32s-32-12.8-32-32V236.8L633.6 441.6c-6.4 6.4-19.2 6.4-25.6 6.4s-19.2 0-25.6-6.4c-6.4-12.8-6.4-38.4 0-51.2L787.2 192H608c-19.2 0-32-12.8-32-32s12.8-32 32-32H896zM441.6 582.4c-12.8-6.4-38.4-12.8-51.2 0L192 787.2V608c0-19.2-12.8-32-32-32s-32 12.8-32 32V896h288c19.2 0 32-12.8 32-32s-12.8-32-32-32H236.8l204.8-198.4c6.4-12.8 6.4-38.4 0-51.2zM448 160c0-19.2-12.8-32-32-32H128v288c0 19.2 12.8 32 32 32s32-12.8 32-32V236.8l198.4 198.4c6.4 12.8 19.2 12.8 25.6 12.8s19.2 0 25.6-6.4c6.4-12.8 6.4-38.4 0-51.2L236.8 192h179.2c19.2 0 32-12.8 32-32zM864 576c-19.2 0-32 12.8-32 32v179.2L633.6 588.8c-12.8-12.8-38.4-12.8-51.2 0-6.4 12.8-6.4 32 0 44.8l198.4 198.4H608c-19.2 0-32 12.8-32 32s12.8 32 32 32H896V608c0-19.2-12.8-32-32-32z"
        fill="#ffffff"
        p-id="2414"
      ></path>
    </svg>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { toggleFullScreen } from "../../../scripts/full-screen";

const ele = ref(document.documentElement);
</script>

<style scoped lang="scss">
.quanpingBox {
  width: 40px;
  height: 40px;
  background-color: #000000a9;
  cursor: pointer;
}
</style>