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

  • 相关阅读:
    vs.net 2005 C# WinForm GroupBOX 的BUG?尝试读取或写入受保护的内存。这通常指示其他内存已损坏
    Git安装及基本使用
    c++实现将表达式转换为逆波兰表达式
    2015年倒数第6周学习报告
    读过的书及读后感
    c++实现队列
    链表插入排序(insertion-sort-list)
    test
    [转]maven入门
    几个学习Maven不错的网址
  • 原文地址:https://www.cnblogs.com/zhang-wenbin/p/10935885.html
Copyright © 2011-2022 走看看