【JS】封装针对dom节点的全屏查看功能

田本初

于 2024-09-29 08:30:00 发布

阅读量63

点赞数 1

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/owo_ovo/article/details/142568708

版权

JavaScript 专栏收录该内容

119 篇文章 3 订阅

订阅专栏

封装一个函数，可以使某个dom元素进入全屏模式

<body>
  <div id="container">
    <h2>这是一个h2</h2>
    <p>这是一个p</p>
    <button id="btn" onclick="">进入/退出全屏</button>
  </div>

  <script>
    btn.onclick = function () {
      // 全屏、关闭全屏
    }
  </script>
</body>

// 进入全屏
function enter(ele) {
  if (ele.requestFullScreen) {
    ele.requestFullScreen()
  } else if (ele.mozRequestFullScreen) {
    ele.mozRequestFullScreen()
  } else if (ele.webkitRequestFullScreen) {
    ele.webkitRequestFullScreen()
  } else if (ele.msRequestFullScreen) {
    ele.msRequestFullScreen()
  }
}
// 退出全屏
function exit() {
  if (document.exitFullScreen) {
    document.exitFullScreen()
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen()
  } else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen()
  } else if (document.msExitFullScreen) {
    document.msExitFullScreen()
  }
}
// 当前处于全屏的元素
function fullEle() {
  return (
    document.fullscreenElement ||
    document.mozFullScreenElement ||
    document.webkitFullscreenElement ||
    document.msFullscreenElement ||
    null
  )
}
// 当前是否处于全屏状态
function isFull() {
  return !!fullEle()
}

优化js：提取方法名，由于浏览器能使用什么方法在初次运行时就已经确定，所以无需额外判断

function getPropertyName(names, target) {
  return names.find((name) => name in target)
}

const enterFullScreenName = getPropertyName(
  [
    "requestFullscreen",
    "webkitRequestFullScreen",
    "mozRequestFullScreen",
    "msRequestFullScreen",
  ],
  document.documentElement
)
// 进入全屏
function enter(ele) {
  enterFullScreenName && ele[enterFullScreenName]()
}

const exitFullScreenName = getPropertyName(
  [
    "exitFullscreen",
    "webkitExitFullScreen",
    "mozCancelFullScreen",
    "msExitFullScreen",
  ],
  document
)
// 退出全屏
function exit() {
  exitFullScreenName && document[exitFullScreenName]()
}

const fullEleName = getPropertyName(
  ["fullscreenElement", "webkitFullscreenElement", "mozFullScreenElement"],
  document
)
// 当前处于全屏的元素
function fullEle() {
  return document[fullEleName] || null
}
// 当前是否处于全屏状态
function isFull() {
  return !!fullEle()
}

function toggle(ele) {
  isFull() ? exit() : enter(ele)
}

整体代码

<!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>
    #container {
      background-color: white;
    }
  </style>
</head>

<body>
  <div id="container">
    <h2>这是一个h2</h2>
    <p>这是一个p</p>
    <button id="btn" onclick="">进入/退出全屏</button>
  </div>
  <script>
    function getPropertyName(names, target) {
      return names.find((name) => name in target)
    }

    const enterFullScreenName = getPropertyName(
      [
        "requestFullscreen",
        "webkitRequestFullScreen",
        "mozRequestFullScreen",
        "msRequestFullScreen",
      ],
      document.documentElement
    )
    // 进入全屏
    function enter(ele) {
      enterFullScreenName && ele[enterFullScreenName]()
    }

    const exitFullScreenName = getPropertyName(
      [
        "exitFullscreen",
        "webkitExitFullScreen",
        "mozCancelFullScreen",
        "msExitFullScreen",
      ],
      document
    )
    // 退出全屏
    function exit() {
      exitFullScreenName && document[exitFullScreenName]()
    }

    const fullEleName = getPropertyName(
      ["fullscreenElement", "webkitFullscreenElement", "mozFullScreenElement"],
      document
    )
    // 当前处于全屏的元素
    function fullEle() {
      return document[fullEleName] || null
    }
    // 当前是否处于全屏状态
    function isFull() {
      return !!fullEle()
    }

    function toggle(ele) {
      isFull() ? exit() : enter(ele)
    }

    btn.onclick = function () {
      toggle(container)
    }
  </script>
</body>

</html>