全屏React

/*

• @Author: 董国庆
• @Date: 2022-05-10 09:09:51
• @Last Modified by: 董国庆
• @Last Modified time: 2022-05-10 09:09:51 */

// 打开浏览器全屏模式

// screenChange 为窗口变化的 的回调函数 参数为当前是否为全屏状态

    const init = screenChange => {
    // 取值17是为了处理页面内容出现滚动条的情况
    let isFull = window.screen.height - window.document.documentElement.clientHeight <= 17;
    
    // 阻止F11键默认事件，用HTML5全屏API代替
    window.addEventListener('keydown', e => {
        e = e || window.event;
        if ((e?.keyCode === 122 || e.key === 'F11') && !isFull) {
            // if (isFull) {
            // exitFullScreen();
            // } else {
            enterFullScreen();
            // }
            if (!(navigator.userAgent.indexOf('Firefox') > 0)) {
                e.preventDefault();
            }
        }
    });
    //监听窗口变化
    window.addEventListener('resize', () => {
        isFull = window.screen.height - window.document.documentElement.clientHeight <= 17;
        screenChange(isFull);
    });
};

//进入全屏
const enterFullScreen = async () => {
    try {
        let el = document.documentElement;
        let rfs =
            el.requestFullScreen ||
            el.webkitRequestFullScreen ||
            el.mozRequestFullScreen ||
            el.msRequestFullscreen;
        if (typeof rfs != 'undefined' && rfs) {
            // el.allowfullscreen = 'true';
            // typeof rfs != "undefined" && rfs
            await rfs?.call?.(el);
        } else if (typeof window.ActiveXObject !== 'undefined') {
            // for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
            let wscript = new ActiveXObject('WScript.Shell'); //eslint-disable-line
            if (wscript != null) {
                wscript.SendKeys('{F11}');
            }
        }
    } catch (error) {}
};

// 退出全屏
const exitFullScreen = async () => {
    try {
        let el = document;
        let cfs =
            el.cancelFullScreen ||
            el.mozCancelFullScreen ||
            el.msExitFullscreen ||
            el.webkitExitFullscreen ||
            el.exitFullscreen;
        if (cfs) {
            // typeof cfs != "undefined" && cfs
            await cfs.call(el);
        } else if (typeof window.ActiveXObject !== 'undefined') {
            // for IE，这里和fullScreen相同，模拟按下F11键退出全屏
            let wscript = new ActiveXObject('WScript.Shell'); //eslint-disable-line
            if (wscript != null) {
                wscript.SendKeys('{F11}');
            }
        }
    } catch (error) {}
};

export default {
    init,
    enterFullScreen,
    exitFullScreen,
};