HTML5进入和退出全屏模式的api网上有很多，一查就查到了

在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-fly.com/a/shumachanpin/article-354340-1.html