js 实现全屏预览（F11功能）--转

JS全屏功能实现

最新推荐文章于 2024-09-02 15:50:40 发布

转载最新推荐文章于 2024-09-02 15:50:40 发布 · 179 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ghfjj/p/6322415.html

本文介绍了一种使用JavaScript实现网页全屏及退出全屏的方法，兼容多种浏览器，并提供了完整的示例代码。不仅可以实现整个页面全屏，还可以针对特定元素进行全屏预览。

可参考文档：http://blog.youkuaiyun.com/tywali/article/details/8623938

js代码

 1 function fullScreen(el) {  
 2     var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,  
 3         wscript;  
 4    
 5     if(typeof rfs != "undefined" && rfs) {  
 6         rfs.call(el);  
 7         return;  
 8     }  
 9    
10     if(typeof window.ActiveXObject != "undefined") {  
11         wscript = new ActiveXObject("WScript.Shell");  
12         if(wscript) {  
13             wscript.SendKeys("{F11}");  
14         }  
15     }  
16 }  
17   
18 function exitFullScreen(el) {  
19     var el= document,  
20         cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,  
21         wscript;  
22    
23     if (typeof cfs != "undefined" && cfs) {  
24       cfs.call(el);  
25       return;  
26     }  
27    
28     if (typeof window.ActiveXObject != "undefined") {  
29         wscript = new ActiveXObject("WScript.Shell");  
30         if (wscript != null) {  
31             wscript.SendKeys("{F11}");  
32         }  
33   }  
34 }

html 代码

1 <button id='btn'>全屏按钮</button>  
2         <div id="content" style="background:yellow;width:500px;height:500px;">sljfsdlfj  
3             <div id="quite" class="btn">退出全屏</div>  
4         </div>

调用

var btn = document.getElementById('btn');  
        var content = document.getElementById('content');  
        btn.onclick = function(){  
            fullScreen(content);  
        }  
        var quite = document.getElementById('quite');  
        quite.onclick = function(){  
            exitFullScreen();  
        }

　　不仅可以实现整个document 全屏预览还能实现特定的div来进行全屏预览

转：http://blog.youkuaiyun.com/wu595679200/article/details/51195142

转载于:https://www.cnblogs.com/ghfjj/p/6322415.html