jquery实现全屏退出全屏功能F11功能
未知
2023-12-16 15:47:06
0
问题描述:

     做一个网站,用户需要把网站用在大屏幕上,触摸屏。所以没有键盘按F11键。在页面上添加全屏及退出全屏功能。
jquery也是js,浏览器的F11全屏 JS无法实现,死心吧。遮盖层遮盖浏览器窗口的内容倒是可以。完全实现 F11的功能目前是没有办法的。另外,用户想全屏,提示下按F11就可以了,没有必要代码去写。另外,全屏功能并不是好的用户体验

遮盖层遮盖浏览器窗口的内容倒是可以...。
直接使IE全屏是做不到的,只能新打开一个当前窗口并使打开的窗口全屏

window.open(location.href,'','fullscreen=1')

解决办法:


//id='content'需要放置在最外围的div中或者body中
<div id="content"></div>
 <button id='btn'>全屏按钮</button> //全屏按钮,没有点击的时候退出全屏按钮是不管用的。比如用F11全屏了,再点击退出全屏按钮就不管用。
 <button id="quite" class="btn">退出全屏</button>

<script type="text/javascript">
    var quite = document.getElementById('quite');
    quite.onclick = function(){
        exitFullScreen();
    }

    var btn = document.getElementById('btn');
    var content = document.getElementById('content');
    btn.onclick = function(){
        fullScreen(content);
    }
    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}");
        }
    }
}

</script>

第二种办法:
在button按钮中添加onclick即可
var fullscreen=function(){
    elem=document.body;
    if(elem.webkitRequestFullScreen){
        elem.webkitRequestFullScreen();   
    }else if(elem.mozRequestFullScreen){
        elem.mozRequestFullScreen();
    }else if(elem.requestFullScreen){
        elem.requestFullscreen();
    }else{
        //浏览器不支持全屏API或已被禁用
        elem.msRequestFullscreen();

    }
}
var exitFullscreen=function(){
    var elem=document;
    if(elem.webkitCancelFullScreen){
        elem.webkitCancelFullScreen();    
    }else if(elem.mozCancelFullScreen){
        elem.mozCancelFullScreen();
    }else if(elem.cancelFullScreen){
        elem.cancelFullScreen();
    }else if(elem.exitFullscreen){
        elem.exitFullscreen();
    }else{
     //浏览器不支持全屏API或已被禁用
     document.msExitFullscreen();
    }
}
第三种办法:

function fullScreen() {

    var el = document.documentElement,

        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() {
    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}");
        }
  }

}



相关内容

XXX技术解析
本文详细解析了XXX技术的定义、特点、应用及发展趋势。该技术具有高...
2025-02-13 01:23:39
小米汽车:经查完全不存在网...
小米汽车回应SU7“断轴”传闻,经查完全不存在。官方迅速澄清,强调...
2025-02-10 06:23:39
网络攻击中的防御策略:WA...
随着互联网普及,网络安全问题突出。WAF作为Web应用防护手段,可...
2025-02-09 17:23:46
如何配置 PHP 以实现上...
通过编辑php.ini文件或使用PHP配置函数,可设置上传文件大小...
2025-02-09 15:00:48
触发器与事件处理程序的比较
触发器与事件处理程序是用于处理特定事件的两种机制。触发器是数据库对...
2025-02-09 12:23:36
PHP pcntl_str...
PHP pcntl模块中,pcntl_strerror函数用于将错...
2025-02-09 03:23:41

热门资讯

layui tooltip提示... 在layui表单中,我们想把一个标签做出提示,以标明这个表单元素是做什么有什么功能时,就可以用上提...
layui中出错Unexpec... layui中出错Unexpected identifier
JavaScript获取当前协... JavaScript获取当前协议,域名,路径
解决Phpcms V9手机门户... 第一步:开启手机网站。位置:模块 》手机门户 》 添加手机站点,如果模块里面没有手机门户,那么就在模...
bootstrap 图片文字居... 问题描述: 让图片和文字居中显示。 解决办法: !-- style--.navbars img{ m...
如何在html中禁止复制文字 问题描述: 如何禁止别人复制自己的文章? 解决办法: 在body标签中添加以下代码: onconte...
JS实现html打印功能,打印... !DOCTYPE htmlhtmlhead meta charset=utf-8 title打印功能...
bootstrap图片排版布局 问题描述: 在使用bootstrap的时候,出现了这样的问题。 排版对不齐。 解决办法: 通过上图发...
手机端底部定位 问题描述: 需要实现的效果 解决办法: !-- 底部 -- div class=layui-row ...