博客

js控制全屏及退出全屏，网上很多代码例子，我这里需求和标准的有点出入：

1、当用户点击某按钮，触发iframe下的页面全屏。

2、不允许用户退出全屏。

解决


第一点


，触发全屏可以按照网上的例子，代码如下：

function fullScreen(){
        var elem = parent.$("iframe")[1];//重点在这里，全屏父页面的iframe
        //console.log(document == parent.$("iframe")[1].contentWindow.document);
        requestFullScreen(elem);
    }

    function requestFullScreen(element) {
        console.log(element);
        //某个元素有请求
        var requestMethod = element.requestFullScreen
            ||element.webkitRequestFullScreen //谷歌
            ||element.mozRequestFullScreen  //火狐
            ||element.msRequestFullScreen; //IE11
//        console.log(requestMethod);
//        console.log(element);
        if (requestMethod) {
            requestMethod.call(element);   //执行这个请求的方法
        } else if (typeof window.ActiveXObject !== "undefined") {  //window.ActiveXObject判断是否支持ActiveX控件
            //这里其实就是模拟了按下键盘的F11，使浏览器全屏
            var wscript = new ActiveXObject("WScript.Shell"); //创建ActiveX
            if (wscript !== null) {    //创建成功
                wscript.SendKeys("{F11}");//触发f11
            }
        }
    }

但是


第二点


遇到了问题：

1、通过捕获键盘事件，捕获“esc”或者“f11”，不能够阻止退出全屏操作！

估计可能是chrome浏览器默认了esc或f11的操作，这两个键的优先级更高。

所以通过禁用键盘事件，行不通。

2、通过监听屏幕变化事件。

通过

function checkFull() {
    var fullScreen = parent.document.webkitIsFullScreen || parent.document.fullscreen || parent.document.mozFullScreen || parent.document.msFullscreenElement;
    return !fullScreen;
}

判断是否是全屏。可行。

理论上通过监听全屏来控制退出没问题：用户退出全屏，继续通过本文的第一段代码，由js恢复全屏。但是现实会提示：该操作必须由用户完成。

可以参考一下文章：


http://web.jobbole.com/89098/

做点功能这么困难吗？看来只有曲线救国了~。

这里想到用confirm来提示：

1、如果退出全屏，直接结束本次操作，记录他的错误操作。

2、如果取消退出，用函数恢复全屏。

理想很丰满，现实很骨感。继续出现（由js恢复全屏，会提示：该操作必须由用户完成。）提示。

想到通过自定义confirm来完成


，毕竟自定义confirm是通过调用页面隐藏div（包括“确认”，“取消”按钮）来控制的。所以这里浏览器应该会认为是用户操作。

完成功能，提示代码如下：

function requestFullScreen(element) {
        //某个元素有请求
        var requestMethod = element.requestFullScreen
            ||element.webkitRequestFullScreen //谷歌
            ||element.mozRequestFullScreen  //火狐
            ||element.msRequestFullScreen; //IE11
        if (requestMethod) {
            requestMethod.call(element);   //执行这个请求的方法
        } else if (typeof window.ActiveXObject !== "undefined") {  //window.ActiveXObject判断是否支持ActiveX控件
            //这里其实就是模拟了按下键盘的F11，使浏览器全屏
            var wscript = new ActiveXObject("WScript.Shell"); //创建ActiveX
            if (wscript !== null) {    //创建成功
                wscript.SendKeys("{F11}");//触发f11
            }
        }
    }

//监听退出全屏事件
window.onresize = function() {
    if(checkFull()) {
        layer.confirm('退出全屏则***,确定退出吗？', null,
            function(){
                //dosth
                layer.closeAll();
            },
            function(){
                requestFullScreen(parent.$("iframe")[1]);
        });
    }
}

function checkFull() {
    var fullScreen = parent.document.webkitIsFullScreen || parent.document.fullscreen || parent.document.mozFullScreen || parent.document.msFullscreenElement;
    return !fullScreen;
}

功能比较low，有大神有其他想法，多交流。