网页全屏以及禁用F11默认行为-vue项目

我在写网页全屏时候发现，通过按键F11打开的全屏貌似使用脚本无法正确关闭。具体表现是，按键F11会打开全屏，这个时候打印window对象中的window.document，会发现window.document下面的有关全屏的属性并未改变，window.document.fullscreen 的值为 false，此时反复点击切换全屏按钮全屏不会切换。通过screenfull.toggle()方法切换全屏，断点发现确实执行到方法里面了，但是并没有关闭全屏（我猜测F11打开的全屏可能权限更高只能由F11关闭，toggle方法虽然执行了切换全屏并且打印window.document.fullscreen 的值发现也切换true和 false，但是由于权限不足并没有真正关闭F11打开的全屏）。

之后，换一个思路，既然无法操作F11打开的全屏，那就阻止F11的默认行为。在适当时机（我选择在入口组件中）监听按键，如果用户按了F11键（keyCode == 122），则阻止默认行为，去进行我们自定义的操作，比如使用screenfull.toggle()方法切换全屏，这样看上去就像是在正常使用F11。然后是处理按钮点击切换全屏。有了以上的步骤，下面就很简单了。在页面添加按钮，点击按钮切换全屏，具体参照如下步骤：

使用封装好的开源库screenfull处理全屏切换

注：网页全屏有很多兼容性写法，screenfull为我们处理了兼容并且监听了全屏状态，这样我们就不需要再判断是否全屏，直接使用toggle方法就可以切换全屏了。

1.安装screenfull：

npm install screenfull --save

2.进入网页就监听keyDown事件

选择在入口组件 App.vue 中监听按键

import screenfull from "screenfull";//引入screenfull
export default {
  mounted() {
    window.addEventListener("keydown", this.KeyDown, true);//监听按键事件
  },
  methods: {
    toFullscreen() {
      //不支持screenfull全屏，则打印错误
      if (!screenfull.isEnabled) {
        console.error("unEnabled");
        return;
      }
      screenfull.toggle();
    },
    KeyDown(event) {
      if (event.keyCode === 122) {
        event.returnValue = false;
        this.toFullscreen();
      }
    }
  }
};

3.在按钮页面增加点击事件，并引入screenfull

<span class="full-btn" @click="toFullscreen">切换全屏</span>

import screenfull from "screenfull"; //引入screenfull
...
// 全屏切换方法
toFullscreen() {
    //不支持screenfull全屏，则打印错误
    if (!screenfull.isEnabled) {
        console.error("unEnabled");
        return;
    }
    screenfull.toggle();
}

进入网页按F11键，发现全屏了，这时无论时继续F11按键或者是Esc键或者点击切换全屏按钮都能关闭全屏；进入其他路由按F11键也能却换全屏，看上去并没有禁用F11的功能（实际上是禁用了F11默认行为的）。至此已经完成了整个项目的全屏切换。

完_______