vue中全屏screenfull使用过程中报错总结
vue中全屏目前实现大体有两种:一种时浏览器自带的。
·
vue中全屏目前实现大体有两种:一种时浏览器自带的document.documentElement.webkitRequestFullScreen();两外一种使用screenfull插件
报错一,页面使用了iframe, 此时报错Uncaught (in promise) TypeError: Disallowed by permissions policy
at VueComponent.fullscreen
浏览器中自带全屏功能document.documentElement.webkitRequestFullScreen()
,不过有兼容性问题
let ope = document.fullscreenElement
if(!ope){
document.documentElement.requestFullscreen();
}else {
document.exitFullscreen();
}
在iframe中添加属性allowfullscreen="true"
解决问题
报错二:使用screenfull 启动项目报错You may need an appropriate loader to handle this file type.
采取两种解决方法:
(1)vue.config.js文件中配置属性
module.exports = {
// 处理screenfull的webpack问题
transpileDependencies:['screenfull'],
}
(2)卸载,screenfull,重新安装@5版本的,尝试了解决方法(1)未解决问题后,
经过一番搜索各种解决办法,有人说时因为最新版本的screenfull不稳定,换一个5版本的就可以了,抱着试一试的想法,就卸载重新安装了@5,好用了
卸载 :npm uninstall screenfull
重新下载 npm i screenfull@5
报错三: 在使用全屏插件screenfull的时候,有时候会遇到类似下面的报错:
解决方式:
在iframe中添加属性allowfullscreen="true"
解决问题
allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" oallowfullscreen="true" msallowfullscreen="true"
更多推荐
已为社区贡献1条内容
所有评论(0)