前端开发攻略---JS封装网页进入/退出全屏功能，兼容各大主流浏览器

bbamx.

已于 2024-04-11 13:33:19 修改

阅读量442

点赞数 5

分类专栏：前端开发攻略文章标签： javascript 前端开发语言

于 2024-04-03 14:28:24 首次发布

本文链接：https://blog.csdn.net/nibabaoo/article/details/137344065

版权

前端开发攻略专栏收录该内容

45 篇文章 0 订阅

订阅专栏

1、演示

2、封装进入全屏函数

mozRequestFullScreen：兼容Firefox

webkitRequestFullscreen：兼容 Chrome、Safari、Opera

msRequestFullscreen：兼容：IE/Edge
    const enter = () => {
      const element = document.documentElement
      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      }
    }
依次判断当前页面或浏览器是否支持进入全屏模式以达到兼容效果

3、封装退出全屏函数

mozCancelFullScreen：兼容Firefox
webkitExitFullscreen：兼容 Chrome、Safari、Opera
msExitFullscreen：兼容：IE/Edge
    const exit = () => {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      }
    }
依次判断当前页面或浏览器是否支持退出全屏模式以达到兼容效果

4、封装判断当前处于全屏的元素

mozFullScreenElement：兼容Firefox
webkitFullScreenElement：兼容 Chrome、Safari、Opera
msFullScreenElement：兼容：IE/Edge
    const fullEle = () => {
      return document.fullscreenElement || document.mozFullScreenElement || document.msFullScreenElement || document.webkitFullScreenElement || null
    }

5、封装判断当前是否处于全屏，需借助第4步

    const isFull = () => {
      return !!fullEle()
    }

6、封装全屏/退出全屏进行切换的函数

    const toggle = () => {
      isFull() ? exit() : enter()
    }

7、完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        padding: 10px;
        background-color: #eee;
        width: 300px;
      }
      button {
        background-color: #266fff;
        color: #fff;
        border: 0;
        width: 120px;
        height: 30px;
      }
    </style>
  </head>

  <body>
    <button>进入/退出全屏</button>
    <div>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem veniam ullam totam quod ut, reprehenderit exercitationem sunt consequatur ipsa
      cum suscipit cumque, eaque amet illum itaque unde vel adipisci aperiam expedita voluptatibus minima? Consequuntur amet magnam eaque vitae
      debitis ab obcaecati adipisci modi earum quod, nihil alias nisi ipsum ipsam reiciendis unde architecto dolores ea expedita. Voluptas
    </div>
  </body>
  <script>
    const btn = document.querySelector('button')
    btn.onclick = () => {
      toggle()
    }

    // 进入全屏
    const enter = () => {
      const element = document.documentElement
      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      }
    }

    // 退出全屏
    const exit = () => {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      }
    }

    // 当前处于全屏的元素
    const fullEle = () => {
      return document.fullscreenElement || document.mozFullScreenElement || document.msFullScreenElement || document.webkitFullScreenElement || null
    }

    // 当前是否处于全屏状态
    const isFull = () => {
      return !!fullEle()
    }

    const toggle = () => {
      isFull() ? exit() : enter()
    }
  </script>
</html>