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

js代码

[javascript]  view plain  copy

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 代码

[html]  view plain  copy

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>  

调用

[javascript]  view plain  copy

1. var btn = document.getElementById('btn');  
2.         var content = document.getElementById('content');  
3.         btn.onclick = function(){  
4.             fullScreen(content);  
5.         }  
6.         var quite = document.getElementById('quite');  
7.         quite.onclick = function(){  
8.             exitFullScreen();  
9.         }  

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