vue 浏览器进入全屏退出全屏及监听用户切屏操作

data() {
 return { msg: [], fullscreen: false, //全屏，fasle默认不是全屏，true为全屏 }
 },

methods: {

//浏览器进入全屏
enterScreen(){ let element = document.getElementById('con_lf_top_div'); //设置后就是 id==con_lf_top_div 的容器全屏 if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.msRequestFullscreen) { // IE11 element.msRequestFullscreen(); } this.fullscreen = true },
 //浏览器退出全屏
 exitScreen(){ if(this.fullscreen){ if (document.exitFullscreen||document.documentElement.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } },

}

mounted() {

this.$api.get(this.$path.INDEX_BANNER).then(res => { this.msg = res.data.data }).catch(err => { }) //监听用户切屏 let num = 0 let _this = this window.onblur = function() { document.title = "请继续考试"; num++ console.log(num) } window.onfocus = function() { document.title = "正在考试中,请勿离开"; if (num === 1 || num === 2) { _this.$message.info("已离开当前页面" + num + "次，离开三次将强制交卷") } if (num > 2) { _this.exitScreen() //退出全屏 _this.$alert('由于您离开次数过多，将强制交卷', '提示', { showClose: false, confirmButtonText: '我要交卷', callback: action => { _this.$message.success("交卷成功！") } }); } } },

destroyed() {

document.removeEventListener('visibilitychange', () => { console.log("销毁页面隐藏") })

}