JS控制网页全屏

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

代码：

<body>
    <button id='btn'>进入全屏</button>  
    <!-- 对这个div 进行全屏处理 
         一开始对全屏处理的dom进行隐藏(display: none;)，不隐藏也是可以的，看个人需求
    -->
    <div id="content" style="background:#333;width: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>

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

猜你喜欢