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>

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

  • 相关阅读:
    [转载] DSP6000图像位移与变形典型算法
    openCV 矩阵(图像)操作函数
    .h头文件 .lib动态链接库文件 .dll 动态链接库
    [转载] OpenCV2.4.3 CheatSheet学习(四)
    [转载] OpenCV2.4.3 CheatSheet学习(三)
    [转载] OpenCV2.4.3 CheatSheet学习(二)
    [转载] OpenCV2.4.3 CheatSheet学习(一)
    视频透雾原理加视频增强Retinex算法介绍
    (视频分辨率介绍)混淆的概念:SIF与CIF、4CIF与D1
    个人实验记录之EIGRP基本配置
  • 原文地址:https://www.cnblogs.com/wangqilong/p/9417502.html
Copyright © 2011-2022 走看看