zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Cisco 路由器硬件信息(各种序列号)查询命令
    解析黑客利用交换机漏洞攻击的常用手段
    所有windows操作系统键盘操作
    [转载]UC黑话解释Cisco统一通信江湖黑话解释
    常用照片尺寸和纸张尺寸参考
    Word中如何選擇從向文字
    python基础数据类型元组(tuple)
    promiseAll 使用
    js JavaScript 封装异步函数并被调用
    promise 学习2
  • 原文地址:https://www.cnblogs.com/vaynewang/p/10213668.html
Copyright © 2011-2022 走看看