huyueshan

导航

js 实现操作浏览器或者元素的全屏与退出全屏功能 

 1 <!DOCTYPE html>
 2 <html lang="en" id="div1">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9 </head>
10 
11 <body>
12     <div style="background-color:red">
13         <button onclick="openww()">新窗口</button>
14         <button type="button" id="btn">全屏</button>
15         <button type="button" id="btn2">退出全屏</button>
16     </div>
17 
18 </body>
19 <script>
20 
21     function openww() {
22         // window.showModalDialog("./tanchuang01.html","Window", "height=100, width=400, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300");
23         window.open("http://baidu.com", "_blank", 'example02', 'channelmode');
24         // window.open ("./tanchuang01.html","newwindow","height=600,width=800");
25         // window.open("./tanchuang01.html", "_blank", "height=100, width=400, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300")
26         // window.open('./tanchuang01.html', 'newwindow', 'height=100,width=400,top=0,left=0,toolbar=no,menubar=no,fullscreen=1,scrollbars=no, resizable=no,location=no, status=no,directories=no')
27     }
28 
29 
30     //全屏功能
31     document.getElementById("btn").onclick = function () {
32         var elem = document.getElementById("div1");
33         // elem.style.width = "100%";
34         // elem.style.height = "100%";
35         // elem.style.overflowY = "scroll";
36         requestFullScreen(elem); // 某个页面元素
37         //requestFullScreen(document.documentElement); // 整个网页
38     };
39 
40     function requestFullScreen(element) {
41         // 判断各种浏览器，找到正确的方法
42         var requestMethod = element.requestFullScreen || //W3C
43             element.webkitRequestFullScreen || //FireFox
44             element.mozRequestFullScreen || //Chrome等
45             element.msRequestFullscreen; //IE11 
46         if (requestMethod) {
47             requestMethod.call(element);
48         } else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
49             var wscript = new ActiveXObject("WScript.Shell");
50             if (wscript !== null) {
51                 wscript.SendKeys("{F11}");
52             }
53         }
54     }
55     //退出全屏 判断浏览器种类
56 
57     document.getElementById("btn2").onclick = function () {
58         exitFull();
59     };
60 
61     function exitFull() {
62         // 判断各种浏览器，找到正确的方法
63         var exitMethod = document.exitFullscreen || //W3C
64             document.mozCancelFullScreen || //FireFox
65             document.webkitExitFullscreen || //Chrome等
66             document.msExitFullscreen; //IE11
67         if (exitMethod) {
68             exitMethod.call(document);
69         } else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
70             var wscript = new ActiveXObject("WScript.Shell");
71             if (wscript !== null) {
72                 wscript.SendKeys("{F11}");
73             }
74         }
75 
76     }
77 </script>
78 
79 </html>

 

posted on 2019-03-04 10:40  huyueshan  阅读(399)  评论(0)    收藏  举报