zoukankan      html  css  js  c++  java
  • JS控制网页全屏

    在谷歌,IE等浏览器中,点击F11按键会进入网页全屏模式,如同看电影的剧场模式,这个在代码中可以通过JS来实现,简单说下在实现这个需求后的个人总结:
    底层网页是已经加载完毕的,这时我们需要的全屏其实就是对底层网页的放大处理,所以采用这种方式来做成全屏效果,你的前提是有底层的网页dom,然后对这个dom进行全屏处理。

    代码:

    <body>
        <button id='btn'>进入全屏</button>  
        <!-- 对这个div 进行全屏处理 
             一开始对全屏处理的dom进行隐藏(display: none;),不隐藏也是可以的,看个人需求
        -->
        <div id="content" style="background:#333;100%;height:100%;display: none;"> 
            <div id="quite" class="btn"><span style="color:#FFF">退出全屏</span></div>  
        </div>  
    </body>
    <script type="text/javascript">
        var content = document.getElementById('content');  
        $("#btn").click(function(){  
            //全屏处理前,将隐藏dom秀出来
            $("#content").show();
            fullScreen(content);  
        });
    
        var quite = document.getElementById('quite'); 
        $("#quite").click(function(){  
            exitFullScreen();
            //隐藏dom
            $("#content").hide();
        }); 
    
    
        //进入全屏
        function fullScreen(el) {  
            var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,  
                wscript;  
    
            if(typeof rfs != "undefined" && rfs) {  ////////
                rfs.call(el);  
                return;  
            } 
    
            if(typeof window.ActiveXObject != "undefined") {  
                wscript = new ActiveXObject("WScript.Shell");  
                if(wscript) {  
                    wscript.SendKeys("{F11}");  
                }  
            }  
        }  
    
        //退出全屏
        function exitFullScreen() {  
            var el= document,  
                cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,  
                wscript;  
    
            if (typeof cfs != "undefined" && cfs) {  
              cfs.call(el);  
              return;  
            }  
    
            if (typeof window.ActiveXObject != "undefined") {  
                wscript = new ActiveXObject("WScript.Shell");  
                if (wscript != null) {  
                    wscript.SendKeys("{F11}");  
                }  
          }  
        }   
     </script>

    文章不足之处,望提出,谢谢..

  • 相关阅读:
    【数通大讲坛02】IP子网划分(VLSM)
    【数通大讲坛01】利用TCP/IP模型理解数据通信过程
    新公司的第一个任务-重构系统(二)
    作为一名程序员的心得分享
    新公司的第一个任务-重构系统(一)
    第一次离职
    2018年终总结
    跳槽并不简单
    小公司的项目交付
    记一次项目测试间隔太长的问题
  • 原文地址:https://www.cnblogs.com/wangqilong/p/9417502.html
Copyright © 2011-2022 走看看