JS实现指定区域的全屏显示功能示例

最新推荐文章于 2024-06-02 16:26:04 发布

呈两面包夹芝士

最新推荐文章于 2024-06-02 16:26:04 发布

阅读量510

点赞数

分类专栏： Vue2.0 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Macao7_W/article/details/125995981

版权

Vue2.0 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>指定区域全屏</title>
    <style>
      #fulldiv {
        background: #fff;
        width: 100%;
        text-align: center;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <h1>指定区域全屏测试</h1>
    <button id="btn">全屏按钮</button>
    <div id="fulldiv">
      <h1>这里是全屏显示的内容</h1>
    </div>
  </body>
  <script>
    var fullscreen = false;
    let btn = document.getElementById('btn');
    let fullarea = document.getElementById('fulldiv')
    btn.addEventListener('click',function(){  
      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 (fullarea.requestFullscreen) {
          fullarea.requestFullscreen();
        } else if (fullarea.webkitRequestFullScreen) {
          fullarea.webkitRequestFullScreen();
        } else if (fullarea.mozRequestFullScreen) {
          fullarea.mozRequestFullScreen();
        } else if (fullarea.msRequestFullscreen) {
          // IE11
          fullarea.msRequestFullscreen();
        }
      }
      fullscreen = !fullscreen;
    })
  </script>
</html>