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不同瀏覽器實現的方法不同，請自行加上
