在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
