HTML5进入和退出全屏模式的api网上有很多 ，一查就查到了，我主要说一下它和F11的区别：
HTML5：用于将dom元素全屏，例如body div img 等等
F11：只是隐藏了地址栏
首先贴出项目的照片：
image.png
项目中遇到的问题 ：在项目交给组长检查的时候，组长提出了一个问题，先按F11进入全屏，在点击这个按钮，结果没办法退出全屏模式了。这个问题研究了好一段时间 ，所以觉得有必要写一个东西来总结一下。
首先遇到一个问题，要去找它的原理，最原始的东西 这是解决一个问题很好的思路。在网上查了很多才找到一些好的有用的帖子，在使用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不同浏览器实现的方法不同，请自行加上
