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
Chrome71版本使用screenfull.js全屏功能时报参数错误的更多相关文章
- vue 中使用 screenfull.js 全屏插件
参考网址: https://blog.csdn.net/houyibing930920/article/details/89214200 https://www.jianshu.com/p/cfbb1 ...
- JS实现元素的全屏、退出全屏功能
在实际开发中,我们很可能需要实现某一元素的全屏和退出全屏功能,如canvas.所幸的是,js提供了相关api用来处理这一问题,只需简单的调用requestFullScreen.exitFullScr ...
- js 实现操作浏览器或者元素的全屏与退出全屏功能
<!DOCTYPE html> <html lang="en" id="div1"> <head> <meta cha ...
- 关于最近在做的一个js全屏轮播插件
最近去面试了,对方要求我在一个星期内用原生的js代码写一个全屏轮播的插件,第一想法就是跟照片轮播很相似,只是照片轮播是有定义一个宽高度大小已经确定了的容器用来存储所有照片,然后将照片全部左浮动,利用m ...
- 富文本编辑器vue2-editor实现全屏功能
vue2-editor非常不错,可惜并未带全屏功能,自己实现了一个,供大家参考. 实现思路:自定义模块. 1. 定义全屏模块Fullscreen /** * 编辑器的全屏实现 */ import no ...
- JS全屏漂浮广告、移入光标停止移动
点击这里查看效果 以下是代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Ty ...
- [HTML]JS全屏代码
video全屏参考:https://www.thecssninja.com/javascript/fullscreen <!doctype html> <html> <h ...
- 基于Ascensor.js全屏切换页面插件
今天给大家分享一款基于Ascensor.js全屏切换页面插件,这款实例 适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- JS全选功能代码优化
原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...
随机推荐
- maven+testng+reportng的pom设置
在pom.xml 加入: <dependency> <groupId>org.testng</groupId> <artifactId>testng&l ...
- Git进阶--你可能不知道的很好用Git功能
一.刚提交的代码,发现需要微调一下 刚刚最新提交了一段代码,然后跟前端说,接口好了.过了2分钟,前端跟你说,哎,兄弟,那个金额能不能返回整数,不要小数点. 这个时候一般我们通常会修改一下之后,再提交一 ...
- Simple Style
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x ...
- 015年传智播客JavaEE 第168期就业班视频教程15-模块规范化
注册功能最起码得有个用户名和密码吧. bigint相当于Java里面的Long.Long型最大的那个数字是19位,我们这里是20位,绝对够用. userName长度预留20%,让它后期可扩展.6-12 ...
- code1167 树网的核
floyd+枚举 看点: 1.floyd同时用数组p记录转移节点k,这样知道线段的端点u v就可以得到整条线段 2.任意一点c到线段a b的距离=(d[a][c]+d[c][b]-d[a][b])/2 ...
- nignx reload的时候报错invalid PID number
第一种思路是从PID号着手,提示无效PID号时nginx.pid文件为空,将进程的PID号追加到空的nginx.pid上,问题解决: 还有问题,请参考:https://www.cnblogs.com/ ...
- SLAM拾萃(2):doxygen
今天给大家介绍一下doxygen.这个工具由来已久了,至少08年左右就已经在用了,但是目前还没见到好的介绍.我个人觉得这是个很简单易用的工具,但是为什么看了别人介绍反而觉得复杂了……所以趁着今天比较闲 ...
- Basic4android v3.50 发布
这次发布的主要是debug 的增强.说实话,在这一方面B4a 比delphi做的要好.希望delphi 在新的版本里面 能进一步加强. I'm happy to release Basic4andro ...
- Mysql索引会失效的几种情况分析(转)
出处:http://www.jb51.net/article/50649.htm 索引并不是时时都会生效的,比如以下几种情况,将导致索引失效: 1.如果条件中有or,即使其中有条件带索引也不会使用(这 ...
- 马婕 2014MBA专硕考试 报刊选读 3 禽流感考验政府的透明度(转)
http://blog.sina.com.cn/s/blog_3e66af4601015z0n.html Bird flu cases test government transparency 禽流感 ...