JS html 实现全屏-蒲公英云

首先,根据如下警告信息,可以看出,无法自动实现全屏功能,必须要手动才可以.

Failed to execute ‘requestFullscreen’ on ‘Element’: API can only be initiated by a user gesture.

所以要实现全屏你可以通过点击一个 button 控件，或是整个 document 添加一个click 事件,通过点击来手动实现全屏。当然，监听键盘事件也是可以的，实现类似于F11的功能。

我这里的例子是通过监听 document.click 事件来实现整个页面的全屏，需要实现某个页面元素的全屏，可以在网上找找，例子很多。

window.onclick = document.onclick = function (e) { 
    var el = document.documentElement;
    //这里的 el 可以是其他的页面元素，这样实现的就是这个元素的全屏，而不是整个页面的全屏
    fullScreen(el);
}
function fullScreen(el) { 
    var rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
        el.mozRequestFullScreen || el.msRequestFullScreen;
    if(typeof rfs != "undefined" && rfs) {
        rfs.call(el);
    } else if(typeof window.ActiveXObject != "undefined") {
        //for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
        var wscript = new ActiveXObject("WScript.Shell");
        if(wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }
}

通过如下方式，想要实现自动全屏，但不行，提示必须手动的警告信息：

Failed to execute ‘requestFullscreen’ on ‘Element’: API can only be initiated by a user gesture.

setTimeout(function() { 
    // IE
    if(document.all) {
        document.click();
    }
    // 其它浏览器
    else {
        var e = document.createEvent("MouseEvents");
        e.initEvent("click", true, true);
        document.dispatchEvent(e);
    }
}, 1000);

判断当前页面是不是全屏的。

/*最好先将页面设置成无滚动(可选)*/
html { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; height: 100%; overflow: hidden; overflow-x: hidden; overflow-y: hidden; }
function checkFull() { 
    //使用html5中的API判断是否全屏(返回当前全屏的元素)
    var FullEl = document.fullscreenElement    ||
        document.msFullscreenElement  ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement;
    //若是不支持Html5中的API，可以使用以最原始的判断方式，但需要将页面的滚动条去掉
    if (FullEl === null) {
        return isFullscreenForNoScroll();
    }
    return true;
}
/** * 支持无滚动条的页面以 Fullscreen api启动的全屏 或是 按f11启动的全屏 * 不支持有滚动条的页面 * @returns {boolean} */
function isFullscreenForNoScroll(){ 
    var explorer = window.navigator.userAgent.toLowerCase();
    if(explorer.indexOf('chrome')>0){
   //webkit
        if (document.body.scrollHeight === window.screen.height && document.body.scrollWidth === window.screen.width) {
            console.log("全屏");
            return true;
        } else {
            console.log("不全屏");
            return false;
        }
    }else{
   //IE 9+ fireFox
        if (window.outerHeight === window.screen.height && window.outerWidth === window.screen.width) {
            console.log("全屏");
            return true;
        } else {
            console.log("不全屏");
            return false;
        }
    }
}

在全屏模式下，按 ESC 或是 F11，会执行系统默认的操作，退出全屏，这个是没有方式可以避免的。但我们可以在退出全屏后，实现自己的操作。

function afterExitFull () { 
    var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;
    //若是支持html5的API
    if (typeof rfs != "undefined" && rfs) {
        window.onkeydown = document.onkeydown = function (e) { 
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if(e && e.keyCode == 122){
   //捕捉F11键盘动作
                e.preventDefault();  //阻止不了F11默认动作
                e.stopPropagation();
                //监听不同浏览器的全屏事件，并件执行相应的代码
                document.addEventListener("webkitfullscreenchange", function(evt) { //
                    if (document.webkitIsFullScreen) {
                        //全屏后要执行的代码
                    }else{
                        //退出全屏后执行的代码
                    }
                }, false);
                document.addEventListener("fullscreenchange", function(evt) { 
                    if (document.fullscreen) {
                        //全屏后执行的代码
                    }else{
                        //退出全屏后要执行的代码
                    }
                }, false);
                document.addEventListener("mozfullscreenchange", function(evt) { 
                    if (document.mozFullScreen) {
                        //全屏后要执行的代码
                    }else{
                        //退出全屏后要执行的代码
                    }
                }, false);
                document.addEventListener("msfullscreenchange", function(evt) { 
                    if (document.msFullscreenElement) {
                        //全屏后要执行的代码
                    }else{
                        //退出全屏后要执行的代码
                    }
                }, false)
            }
        }
    //否则，使用原始的方法
    } else {
        window.onresize = function(e) { 
            if (checkFull()) {
                //退出全屏后要执行的代码
            } else {
                //全屏后要执行的代码
            }
        };
    }
}