html - JavaScript怎么打开一个新窗口页面 并且这个页面全屏 如同 F11效果

查看:124
本文介绍了html - JavaScript怎么打开一个新窗口页面 并且这个页面全屏 如同 F11效果的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

如题,我有个展示页面,用户点击按钮就要求打开页面
这个页面要求新标签页打开并且自动全屏
全屏效果要求像按F11那样的效果!!!

解决方案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id='btn'>全屏按钮</button>  
    <div id="content" style="background:yellow;width:500px;height:500px;">sljfsdlfj  
        <div id="quite" class="btn">退出全屏</div>  
    </div>  
</body>
<script type="text/javascript">
    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(el) {  
        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}");  
            }  
      }  
    }  

        var btn = document.getElementById('btn');  
        var content = document.getElementById('content');  
        btn.onclick = function(){  
            fullScreen(content);  
        }  
        var quite = document.getElementById('quite');  
        quite.onclick = function(){  
            exitFullScreen();  
        }  
 </script>
</html>

这篇关于html - JavaScript怎么打开一个新窗口页面 并且这个页面全屏 如同 F11效果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆