js实现浏览器全屏以及退出全屏

Laughing
2017-07-31 / 0 评论 / 1,422 阅读 / 搜一下 / 正在检测是否收录...
温馨提示:
本文最后更新于2020年09月26日,已超过1650天没有更新,若内容或图片失效,请留言反馈。

东西很简单,直接上代码

/* 
         * 全屏 
         */  
        function fullScreen(ele) {  
            var fullScreenEnabled = document.fullScreenEnabled || document.webkitFullScreenEnabled || document.mozFullScreenEnabled || document.msFullScreenEnabled;  
            var isFullScreen = document.fullScreenElement || document.webkitFullScreenElement || document.mozFullScreenElement || document.msFullScreenElement;  
            if (fullScreenEnabled === undefined || fullScreenEnabled) {  
                if (isFullScreen === undefined) {  
                    if (ele.requestFullScreen) {  
                        ele.requestFullScreen();  
                    } else if (ele.webkitRequestFullScreen) {  
                        ele.webkitRequestFullScreen();  
                    } else if (ele.mozRequestFullScreen) {  
                        ele.mozRequestFullScreen();  
                    } else if (ele.msRequestFullScreen) {  
                        ele.msRequestFullScreen();  
                    } else {  
                        console.log('不存在进入全屏的方法! => undefined');  
                    }  
                } else if (isFullScreen === null) {  
                    if (ele.requestFullScreen) {  
                        ele.requestFullScreen();  
                    } else if (ele.webkitRequestFullScreen) {  
                        ele.webkitRequestFullScreen();  
                    } else if (ele.mozRequestFullScreen) {  
                        ele.mozRequestFullScreen();  
                    } else if (ele.msRequestFullScreen) {  
                        ele.msRequestFullScreen();  
                    } else {  
                        console.log('不存在进入全屏的方法! => null');  
                    }  
                } else {  
                    console.log('元素已经是全屏状态了!');  
                    return true;  
                }  
            } else {  
                console.log('不支持全屏模式!');  
            }  
        }  
  
        /* 
         * 退出全屏 
         */  
        function exitFullScreen() {  
            var fullScreenEnabled = document.fullScreenEnabled || document.webkitFullScreenEnabled || document.mozFullScreenEnabled || document.msFullScreenEnabled;  
            var isFullScreen = document.fullScreenElement || document.webkitFullScreenElement || document.mozFullScreenElement || document.msFullScreenElement;  
            if (fullScreenEnabled === undefined || fullScreenEnabled) {  
                if (isFullScreen === undefined) {  
                    if (document.exitFullScreen) {  
                        document.exitFullScreen();  
                    } else if (document.webkitExitFullScreen) {  
                        document.webkitExitFullScreen();  
                    } else if (document.webkitCancelFullScreen) {  
                        document.webkitCancelFullScreen();  
                    } else if (document.mozCancelFullScreen) {  
                        document.mozCancelFullScreen();  
                    } else if (document.msExitFullScreen) {  
                        document.msExitFullScreen();  
                    } else if (document.msCancelFullScreen) {  
                        document.msCancelFullScreen();  
                    } else {  
                        console.log('不存在退出全屏的方法! => undefined');  
                    }  
                } else if (isFullScreen !== null) {  
                    if (document.exitFullScreen) {  
                        document.exitFullScreen();  
                    } else if (document.webkitExitFullScreen) {  
                        document.webkitExitFullScreen();  
                    } else if (document.webkitCancelFullScreen) {  
                        document.webkitCancelFullScreen();  
                    } else if (document.mozCancelFullScreen) {  
                        document.mozCancelFullScreen();  
                    } else if (document.msExitFullScreen) {  
                        document.msExitFullScreen();  
                    } else if (document.msCancelFullScreen) {  
                        document.msCancelFullScreen();  
                    } else {  
                        console.log('不存在退出全屏的方法! => null');  
                    }  
                } else {  
                    console.log('元素已经是非全屏状态了!');  
                    return true;  
                }  
            } else {  
                console.log('不支持全屏模式!');  
            }  
        } 
0

评论 (0)

取消
  1. 头像
    Demos
    MacOS · Safari

    感谢!

    回复
  2. 头像
    hello
    MacOS · Google Chrome

    这个可以用吗

    回复