前端的全屏与退出全屏

前端实现全屏，主要分两种通过b站功能说明：

1.是指定dom元素和当前浏览器窗口大小一致（网页全屏），如

image

原理主要是通过设置dom容器的大小实现，此处不做过多阐述。

2.是指定dom元素和当前显示器窗口大小一致（屏幕全屏）

image

实现原理：调用浏览器接口js调用的接口对F11无效

//退出全屏
function exitFullScreen() {
    var el = document;
    var cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||
        el.mozCancelFullScreen || el.exitFullScreen;
    if (typeof cfs != "undefined" && cfs) {
        cfs.call(el);
    } else if (typeof window.ActiveXObject != "undefined") {
        //for IE，这里和fullScreen相同，模拟按下F11键退出全屏
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }
}
//全屏
function requestFullScreen() {
    var element = document.getElementsByTagName("body")[0];
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
    if (requestMethod) {
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") {
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}

//捕捉屏幕变化（）
document.addEventListener ("fullscreenchange", FShandler);
document.addEventListener ("webkitfullscreenchange", FShandler);
document.addEventListener ("mozfullscreenchange", FShandler);
document.addEventListener ("MSFullscreenChange", FShandler);
function FShandler() {
    if ($("#fullpage").hasClass("active")) {
        $("#fullpage").removeClass("active").find("p").html("全屏");
        $("#switch-box").find(".bar-item").removeClass("active");
    } else {
        $("#switch-box").find(".bar-item").removeClass("active");
        $("#fullpage").addClass("active").find("p").html("取消<br>全屏");
    }
}