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"

Logo

前往低代码交流专区

更多推荐