vue中监听全屏和突出全屏事件

Question

目前有个需求，网页f11全屏后是一个样式，退出全屏又是另一个事件，结合百度我在mounted生命周期函数里加入如下代码，无效：
`

document.addEventListener("webkitfullscreenchange",function(){
           if(document.fullscreen){
              alert(123);
           }else{
              alert(999);
           }
        },false);

`

求个正确的监听全屏和退出全屏状态的方法

Answer 1

不是不触发，是只有通过 element.requestFullScreen() 和 document.exitFullScreen() 这两个方法触发的全屏/退出全屏才会触发。

用浏览器菜单里自带的那个全屏（其实是伪全屏，Windows 上看不出来，Mac 上尤为明显），跟上面这个 API 不是一回事儿。

出于兼容性的考虑，建议使用 screenfull.js。

Answer 2

楼上正解

另外document.fullScreen已经过时了，可以通过检查document.fullscreenelement是否为null来确定文档上是否启用全屏模式。