js - 全屏/取消全屏

最新推荐文章于 2024-05-16 14:43:58 发布

方程式1002

最新推荐文章于 2024-05-16 14:43:58 发布

阅读量235

点赞数

分类专栏： javascript

原文链接：https://www.bianchengquan.com/article/32271.html

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!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>
    body{
      background-color: #fff;
      color: #74f852;
    }
  </style>
</head>
<body>
  <a href="javascript:;">点击- 进入全屏</a>
  <p >点击 - 退出全屏</p>
  <script>
    document.querySelector("a").addEventListener('click',function(){
      toFullScreen()
       /**
       * 进入全屏
       */
      function toFullScreen() {
        let aa = document.body;
        aa.webkitRequestFullScreen ?
          aa.webkitRequestFullScreen() :
          aa.mozRequestFullScreen ?
          aa.mozRequestFullScreen() :
          aa.msRequestFullscreen ?
          aa.msRequestFullscreen() :
          aa.requestFullScreen ?
          aa.requestFullScreen() :
          alert("浏览器不支持全屏");
      }
    })
    document.querySelector("p").addEventListener('click',function(){
      exitFullscreen() 
      /**
       * 退出全屏
       */
      function exitFullscreen() {
        let pp = parent.document;
        pp.webkitCancelFullScreen ?
          pp.webkitCancelFullScreen() :
          pp.mozCancelFullScreen ?
          pp.mozCancelFullScreen() :
          pp.cancelFullScreen ?
          pp.cancelFullScreen() :
          pp.msExitFullscreen ?
          pp.msExitFullscreen() :
          pp.exitFullscreen ?
          pp.exitFullscreen() :
          alert("退出失败,可尝试Esc退出");
      }
    })
  </script>
</body>
</html>