1. 程式人生 > 其它 >js模擬F11全屏功能

js模擬F11全屏功能

html部分:

                <div class="help ml20" @click="fullScreen">
                    <i class="el-icon-full-screen sideBar-el-icon"></i>
                </div>

js部分(isFllScreen是判斷是否開了全屏用的變數):

        fullScreen() {
            let docElm = document.documentElement;
            
if (this.isFllScreen) { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); }
else if (document.msExitFullscreen) { document.msExitFullscreen(); } this.isFllScreen = false } else { //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(); }
//FireFox else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } //Chrome等 else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } this.isFllScreen = true } }

效果: