Javascript

js实现浏览器全屏功能 js

本文主要是介绍js实现浏览器全屏功能 js，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

浏览器全屏功能实现

通过浏览器自带的requestFullscreen方式实现全屏
通过浏览器自带的exitFullscreen方式实现退出全屏

<!DOCTYPE html>
<html class="no-js">
  <!--<![endif]-->

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="" />
  </head>

  <body>
    <div onclick="toggleFull()">进入全屏</div>
    <div onclick="toggleFull()">退出全屏</div>
    <div>
      <img
        src="https://file03.16sucai.com/2017/1100/16sucai_p569c197_875.JPG"
        id="img"
      />
    </div>
    <script>
      function toggleFull(e) {
        //获取全屏的元素
        if (!document.fullscreenElement) {
          //进入页面全屏
          document.documentElement.requestFullscreen();
        } else {
          if (document.exitFullscreen) {
            //退出全屏
            document.exitFullscreen();
          }
        }
      }
    </script>
  </body>
</html>

效果图如下

单个元素全屏 img或是video之类标签很适合

针对点击的元素进行全屏，使用 e.target.requestFullscreen();方法

<!DOCTYPE html>
<html class="no-js">
  <!--<![endif]-->

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="" />
  </head>

  <body>
    <div>
      <img
        src="https://file03.16sucai.com/2017/1100/16sucai_p569c197_875.JPG"
        id="img"
      />
    </div>
    <script>
      document.getElementById("img").addEventListener("click", Full);
      function Full(e) {
        //获取全屏的元素
        if (!document.fullscreenElement) {
          //进入页面全屏
          e.target.requestFullscreen();
        } else {
          if (document.exitFullscreen) {
            //退出全屏
            document.exitFullscreen();
          }
        }
      }
      ///  //
    </script>
  </body>
</html>

效果图如下

这篇关于js实现浏览器全屏功能 js的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航