• 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

  • 相关阅读:
    IoC和AoP
    学习树
    Avalon Framework概念
    java利用WatchService实时监控某个目录下的文件变化并按行解析
    [DBT-08001] 无法检查可用内存。
    C#之http协议与soap协议之间的区别
    C#之ActionResult 详解
    C#实现连接池
    C#MVC之传入字典的模型项为 null,但此字典需要类型“System.Decimal”的非 null 模型项。
    Func的介绍
  • 原文地址:https://www.cnblogs.com/vaynewang/p/10213668.html
Copyright © 2020-2023  润新知