全屏切换---demo

最新推荐文章于 2022-09-16 21:12:47 发布

咩有猫腻.

最新推荐文章于 2022-09-16 21:12:47 发布

阅读量154

点赞数

分类专栏： demo 前端后端demo

本文链接：https://blog.csdn.net/DcTbnk/article/details/107707316

版权

前端后端demo 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

demo

15 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="toggleHandle()">全屏切换</button>
    <script>
      let fullscreen = false;
      function toggleHandle() {
        let element = document.documentElement;
        if (fullscreen) {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        } else {
          if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
          } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
          } else if (element.msRequestFullscreen) {
            // IE11
            element.msRequestFullscreen();
          }
        }
        fullscreen = !fullscreen;
      }
    </script>
  </body>
</html>

咩有猫腻.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
全屏切换---demo

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <tit.
复制链接

扫一扫

专栏目录