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("销毁页面隐藏") })
}
vue 浏览器进入全屏退出全屏及监听用户切屏操作
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。