在生产环境长期使用的一个“全屏”功能突然失效了,查看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

Chrome71版本使用screenfull.js全屏功能时报参数错误的更多相关文章

  1. vue 中使用 screenfull.js 全屏插件

    参考网址: https://blog.csdn.net/houyibing930920/article/details/89214200 https://www.jianshu.com/p/cfbb1 ...

  2. JS实现元素的全屏、退出全屏功能

     在实际开发中,我们很可能需要实现某一元素的全屏和退出全屏功能,如canvas.所幸的是,js提供了相关api用来处理这一问题,只需简单的调用requestFullScreen.exitFullScr ...

  3. js 实现操作浏览器或者元素的全屏与退出全屏功能

    <!DOCTYPE html> <html lang="en" id="div1"> <head> <meta cha ...

  4. 关于最近在做的一个js全屏轮播插件

    最近去面试了,对方要求我在一个星期内用原生的js代码写一个全屏轮播的插件,第一想法就是跟照片轮播很相似,只是照片轮播是有定义一个宽高度大小已经确定了的容器用来存储所有照片,然后将照片全部左浮动,利用m ...

  5. 富文本编辑器vue2-editor实现全屏功能

    vue2-editor非常不错,可惜并未带全屏功能,自己实现了一个,供大家参考. 实现思路:自定义模块. 1. 定义全屏模块Fullscreen /** * 编辑器的全屏实现 */ import no ...

  6. JS全屏漂浮广告、移入光标停止移动

    点击这里查看效果 以下是代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Ty ...

  7. [HTML]JS全屏代码

    video全屏参考:https://www.thecssninja.com/javascript/fullscreen <!doctype html> <html> <h ...

  8. 基于Ascensor.js全屏切换页面插件

    今天给大家分享一款基于Ascensor.js全屏切换页面插件,这款实例 适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...

  9. JS全选功能代码优化

    原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...

随机推荐

  1. 关于TP5中的依赖注入和容器和facade

    看了不少的文章,也看了官方的介绍,还是根据自己的理解,写写看法,理清下思路 只是单纯的说依赖注入Dependency Injection和容器 别的不白扯 比如有A,B,C三个类 A类的1方法依赖B类 ...

  2. ES6系列_3之变量的解构赋值

    ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 解构有三种类型: 1.数组的解构赋值 (1)简单的数组解构 以前,我们给变量赋值是直接单个指定值,比如: let a=0; ...

  3. Firefox 被Snap.do 劫持

    Firefox IE 被劫持 windows的控制面板,卸载程序, 找任何跟「Snap.do」有关的软件,找到後先移除「Snap.Do Engine」再移除「Snap.Do」. 注册表里查找 Snap ...

  4. Liunx cannot remove `xxx': Operation not permitted

    链接: http://mangocool.com/detail_1_1439515930283.html 解到原来文件还可以设置隐藏权限,就是这个chattr设置,下面我们来看看这个命令的详解. [r ...

  5. 迷你MVVM框架 avalonjs 学习教程8、属性操作

    属性操作是DOM操作很大的一块,它包括类名操作,表单元素的value属性操作,元素固有属性的管理,元素自定义属性的管理,某些元素的一些布尔属性的操作.大多数情况下,元素属性的值是字符串类型,我们称之为 ...

  6. linux之cut

    [linux之cut] -b:字节 -c:字符 -d:自定义域 -f:域范围 参考:http://wenku.baidu.com/view/9399bc8383d049649b66588b.html

  7. shell脚本学习指南-学习(1)

    1.先看下面这个命令: $who  | wc  -l  计算当前登陆的用户个数: $who   当前登陆的有哪些用户: pipeling(   |  )可以在两个程序之间建立管道,左侧的结果成为右侧的 ...

  8. etcd 命令行

    比较重要的配置 -name 节点名称,默认是UUID-data-dir 保存日志和快照的目录,默认为当前工作目录-addr 公布的ip地址和端口. 默认为127.0.0.1:2379-bind-add ...

  9. sql unsigned

    1.数字类型无符号化,取0以上的值    学习传送门  http://www.cnblogs.com/blankqdb/archive/2012/11/03/blank_qdb.html

  10. springmvc+mybaits一个事物同时update和调用存储过程异常回滚

    事物作用的impl类这样写的 @Override public int updateReturnAll(int item, int status, int idUser) { // TODO Auto ...