前端實(shí)現(xiàn)全屏，主要分兩種通過b站功能說明：

1.是指定dom元素和當(dāng)前瀏覽器窗口大小一致（網(wǎng)頁全屏），如

image

原理主要是通過設(shè)置dom容器的大小實(shí)現(xiàn)，此處不做過多闡述。

2.是指定dom元素和當(dāng)前顯示器窗口大小一致（屏幕全屏）

image

實(shí)現(xiàn)原理：調(diào)用瀏覽器接口js調(diào)用的接口對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>全屏");
    }
}