js模擬F11全屏功能
阿新 • • 發佈:2021-11-22
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 } }
效果: