在Internet上,有许多HTML5 API可以进入和退出全屏模式,并且可以在检查后找到它们。我将主要讨论它与F11的区别:
HTML5:用于使dom元素全屏显示,例如body div img等。
F11:只需隐藏地址栏
首先发布项目图片:
image.png
项目中遇到的问题:将项目移交给团队负责人进行检查时,团队负责人提出了一个问题。首先,按F11进入全屏。单击此按钮后,无法退出全屏模式。这个问题已经研究了很长时间,所以我觉得有必要写一个总结。
首先遇到一个问题,找到它的原理,是最原始的东西。这是解决问题的好主意。在Internet上搜索了很多之后,我发现了一些很好的有用的帖子。使用F11进入全屏后,调用H5的api退出全屏是没有用的,因为原理不同。
关键点在这里:浏览器在全屏模式下屏蔽了键盘事件的Esc和F11,因此退出全屏模式时不会触发键盘事件。
这句话的意思是无法监视全屏退出事件。
解决问题的方法:由于无法收听它,因此请不要使用它,先听一下按F11键的事件,然后取消浏览器的默认事件,也就是说,禁用F11,然后调用H5 API使其成功,这可以在全屏模式下成功解决该问题。简而言之:当某个事物由两个不同的条件控制时,让一个条件替换另一个。
最后粘贴代码:
//在按钮上绑定fullScreen函数
data(){
return{
click:true
}
},
method:{
fullScreen() {
if (this.click) {
document.body.webkitRequestFullscreen();
this.click = false;
} else if (!this.click) {
document.webkitCancelFullScreen();
this.click = true;
}
}
},
mounted(){
document.onkeydown = (event) => { //整个键盘的onkeydown事件
if ( event.keyCode == 122) {
event.preventDefault(); //阻止浏览器的默认行为
this.fullScreen(); //调用H5的api
}
};
}
//这里H5的api不同浏览器实现的方法不同,请自行加上
本文来自电脑杂谈,转载请注明本文网址:
http://www.pc-/a/shumachanpin/article-354340-1.html