javascript 如何实现浏览器全屏、退出全屏效果?
大家好我是图恩，最近项目有个需求是就生成一个pdf，通过一个在线的翻页的轮播页面，点击导出就可以导出成pdf，主要是通过html2canvas跟jspdf实现，将轮播页面截图再拼接成一个pdf。点击全屏按钮就可以实现全屏，目前全屏按钮就是通过下面这段代码实现：
//进入全屏
function enterfullscreen() { //进入全屏
var docElm = document.documentElement;
//W3C
if(docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if(docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
else if(docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if(docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
}
// 退出全屏
function exitfullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if(document.msExitFullscreen) {
document.msExitFullscreen();
}
}
通过以上方法实现全屏后，如果此时你通过浏览器的提示按esc退出全屏的话，会发现第一次没有效果，再按一次就可以，如何解决这个问题呢？
其实可以通过监听resize方法来解决这个问题，fsFlag代表是否点击了全屏，为boolean值，思路就是点击了全屏后就启动一个定时器，一秒后监听resize方法，因为按了esc后会触发resize方法，所以可以在resize方法里面再手动调用退出全屏方法。最后记得要清楚定时器。
watch: {
fsFlag(val, oldvalue) {
if (val) {
// 如果点击全屏，就在1s后监听resize方法
setTimeout(() => {
window.addEventListener('resize', this.resize)
}, 1000)
}
}
},
监听方法须在methods里面实现，这样才能正常销毁
resize() {
if (this.fsFlag) {
this.fulScrExit();
}
}
调用退出方法同时销毁监听
fulScrExit() {
this.fsFlag = false;
this.windowExitFullScreen()
// 退出监听
window.removeEventListener('resize',this.resize)
},
chrome浏览器在全屏后按esc不能退出全屏的解决办法
发表评论 (审核通过后显示评论)：