zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    setBackgroundResource和setImageResource的区别
    startActivityForResult 请求码不正确
    startActivityForResult 请求码不正确
    startActivityForResult 请求码不正确
    svn“Previous operation has not finished; run 'cleanup' if it was interrupted“报错的解决方法
    svn“Previous operation has not finished; run 'cleanup' if it was interrupted“报错的解决方法
    svn“Previous operation has not finished; run 'cleanup' if it was interrupted“报错的解决方法
    android stadio svn 使用技巧
    android stadio svn 使用技巧
    android stadio svn 使用技巧
  • 原文地址:https://www.cnblogs.com/zhenguo-chen/p/10469330.html
Copyright © 2011-2022 走看看