vue element 全屏不好用问题

Chrome71版本使用screenfull.js全屏功能时报参数错误

 

在生产环境长期使用的一个“全屏”功能突然失效了，查看Console 如下报错：

Failed to execute 'requestFullscreen' on 'Element': parameter 1 ('options') is not an object

项目引入了第三方的一个全屏兼容包 “screenfull.js” , 大致翻阅了下源代码，对各浏览器非标准的实现做了一个映射，定位到出错行：

    ...
    var keyboardAllowed =
    typeof Element !== "undefined" && "ALLOW_KEYBOARD_INPUT" in Element; 

    ...

     if (/ Version\/5\.1(?:\.\d+)? Safari\//.test(navigator.userAgent)) {
        elem[request]();
      } else {
       elem[request](keyboardAllowed && Element.ALLOW_KEYBOARD_INPUT);
      }

此处调用requestFullscreen 时传入的是一个布尔值，是通过判断Element.ALLOW_KEYBOARD_INPUT的到的，该值意为支持键盘输入。实际测试在71，70 及 59 版本 该值均是 undefined ，而且不传入也同样可以键盘输入。不太清楚是否是早期版本非标准的实现。

查阅MDN文档，Chrome在71版本实现了 FullscreenOptions （划重点），该参数参数必须是一个对象，实测 undefined 或不传也是可以的 ，但传入一个布尔值就直接抛出了异常。对象属性只有一个 navigationUI。

navigationUI 的值：

auto ： 默认 ，交给处理

hide : 隐藏导航界面

show： 显示导航界面，收缩界面元素留出更多的空间给页面展示。

我在chrome中又尝试了这个几个值，未发现界面有什么不同之处。

 

原因已经查明，只要简单做下修改即可，如果担心早期版本报错，那么简单做一个判断吧：

    if (/ Version\/5\.1(?:\.\d+)? Safari\//.test(navigator.userAgent)) {
      elem[request]();
    } else {
      if (keyboardAllowed) {
        elem[request](Element.ALLOW_KEYBOARD_INPUT);
      } else {
        elem[request]({ navigationUI: "auto" });
      }
    }

 

重新打包 OK