突然发现的F11全屏 API

最新推荐文章于 2023-12-01 13:48:05 发布

几面

最新推荐文章于 2023-12-01 13:48:05 发布

阅读量815

点赞数

分类专栏：前端文章标签：全屏API

本文链接：https://blog.csdn.net/qq_34178990/article/details/83656890

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  .test {
    width: 200px;
    height: 200px;
    background-color: #3a87e6;
  }
</style>
<body>

<div id="test" class="test"></div>
<script>
  var elem = document.getElementById("test")

  var flag = false

  elem.addEventListener('click', function () {
    if (!flag) {
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
        console.log(11)
      } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
        console.log(22)

      } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
        console.log(33)

      } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen();
        console.log(44)

      }
      flag = !flag
    }else {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
      flag = !flag
    }
  });

</script>
</body>
</html>