【JavaScript】实现网页全屏

2022-07-18 18:06:19 阅读：207 来源： 互联网

标签：msRequestFullscreen 网页 documentElement JavaScript 兼容全屏 document webkitRequestFu

今天看到一个好玩的功能，将网页全屏，之前一直都觉得挺麻烦的，到网上搜索之后发现挺好用的，其实实现逻辑还挺简单的，简单记录下来备用。

<!doctype html>
<html>
    <head>
      <meta charset="UTF-8"/>
        <title>全屏不全屏</title>
    </head>
    <body>
      <button id="fullScreen">全屏模式</button>
      <button id="noFullScreen">取消全屏</button>
     </body>
</html>
<script>
       document.getElementById("fullScreen").onclick=function(){
          if(document.documentElement.RequestFullScreen){
            document.documentElement.RequestFullScreen();
          }
          //兼容火狐
          console.log(document.documentElement.mozRequestFullScreen)
          if(document.documentElement.mozRequestFullScreen){
            document.documentElement.mozRequestFullScreen();
          }
          //兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
          if(document.documentElement.webkitRequestFullScreen){
            document.documentElement.webkitRequestFullScreen();
          }
          //兼容IE,只能写msRequestFullscreen
          if(document.documentElement.msRequestFullscreen){
            document.documentElement.msRequestFullscreen();
          }
       }
       document.getElementById("noFullScreen").onclick=function(){
          if(document.exitFullScreen){
            document.exitFullscreen()
          }
          //兼容火狐
          console.log(document.mozExitFullScreen)
          if(document.mozCancelFullScreen){
            document.mozCancelFullScreen()
          }
          //兼容谷歌等
          if(document.webkitExitFullscreen){
            document.webkitExitFullscreen()
          }
          //兼容IE
          if(document.msExitFullscreen){
            document.msExitFullscreen()
          }
       }
</script>

标签：msRequestFullscreen,网页,documentElement,JavaScript,兼容,全屏,document,webkitRequestFu
来源： https://www.cnblogs.com/garinzhang/p/16491453.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

【JavaScript】 实现网页全屏

【JavaScript】实现网页全屏