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

原文地址:https://www.cnblogs.com/vaynewang/p/10213668.html