浏览器事件全屏

事件

// 全屏
export const fullScreen = (element: any) => {
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen || element.msRequestFullscreen || element.requestFullscreen;
    if (requestMethod) {
        requestMethod.call(element);
    } else if (typeof (window as any).ActiveXObject != "undefined") {
        //for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }
}
// 退出全屏
export const exitFullScreen = () => {
    var el: any = document;
    // 判断各种浏览器，找到正确的方法
    var exitMethod = el.exitFullscreen || //W3C
        el.mozCancelFullScreen || //FireFox
        el.webkitExitFullscreen || //Chrome等
        el.webkitExitFullscreen; //IE11
    if (exitMethod) {
        exitMethod.call(document);
    } else if (typeof (window as any).ActiveXObject !== "undefined") { //for Internet Explorer
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}

监听事件

const fullChage = (e: any) => {
    try {
        const el: any = document
        // if isFullScreen
        if (el.isFullScreen || el.mozFullScreen || el.webkitIsFullScreen) {
            // do someting
        }
    } catch (error) {
        console.log("全屏失败", error)
    }
}

document.addEventListener("fullscreenchange", function (e) {
    fullChage(e)
});
document.addEventListener("mozfullscreenchange", function (e) {
    fullChage(e)
});
document.addEventListener("webkitfullscreenchange", function (e) {
    fullChage(e)
});
document.addEventListener("msfullscreenchange", function (e) {
    fullChage(e)
});