解决 iframe嵌入后页面全屏插件（screenfull）报错的问题（fullscreen error）

最新推荐文章于 2024-03-28 11:26:48 发布
最新推荐文章于 2024-03-28 11:26:48 发布
阅读量2.7k 收藏 3
点赞数 3
分类专栏： Js 文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yrqlyq/article/details/122492638
版权

在使用全屏插件screenfull的时候，有时候会遇到类似下面的报错：
在这里插入图片描述
解决方式：
在iframe中添加属性allowfullscreen="true"解决问题

<iframe allowfullscreen="true" src="*****" frameborder="0" style="width: 100%; height: calc(100vh - 115px);"></iframe>
YaaLee_
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
fullscreen-jbrowse:JBrowse 的全屏插件
05-31
全屏-jbrowse JBrowse 的全屏插件 该插件添加了一个按钮，允许全屏查看 jbrowse。 如果与 iframe 一起使用，您需要配置 iframe 以允许全屏视图。 应该兼容： 浏览器 支持版本 Chrome合金 20+ 火狐 10.0 + IE 11 + 苹果浏览器 5.1 + 歌剧 12.10 + 开发由 USDA-ARS、玉米昆虫和作物基因组学研究组提供支持。
jQuery全屏插件Textarea Fullscreen
08-07
插件描述 Textarea Fullscreen是一个jquery插件,可以将textarea设置为全屏模式 使用方法 引用jquery.js,jquery.textareafullscreen.js和textareafullscreen.css $(function(){ $('#demo').textareafullscreen(); }) 博文地址：http://blog.csdn.net/itmyhome1990/article/details/38372877
Permissions policy violation: fullscreen is not allowed in this document. uniapp的webview内嵌视频组件的页面
最新发布
2301_76607997的博客
03-28 433
uni-app开发使用video报错：The element has no supported sources.问题1：uniapp的web-view 内嵌 视频组件的页面的时候 视频不能全屏问题。问题2: 视频能全屏操作了 但是全屏后的视频是 竖着 不能横屏全屏展示。
redis服务器错误日志分析
热门推荐
fxnfk
02-28 3万+
未解决的问题 persistence-available no #不用持久化 maxmemory 4gb #内存限制 maxmemory-policy volatile-lru #内存满时，删除设置了超时时间的那些key的最近最久没有使用的 #save 900 1 #还注释了这三行，这是rdb满足什么条件执行持久化，我觉得有上面的配置这个不注释也可以 #sav...
Web 安全之 Permissions Policy（权限策略）详解
路多辛的所思所想
09-11 2758
Permissions Policy 为 web 开发人员提供了明确声明哪些功能可以在网站上使用，哪些功能不能在网站上使用的机制。可以设置一组策略，用于限制站点代码可以访问的 API 或者修改浏览器对某些特性的默认行为。设置 Permissions-Policy 可以在代码库不断演进的同时强制执行最佳实践，同时更安全地组合第三方内容。Permissions Policy 类似于 Content Security Policy（CSP 内容安全策略），但控制的是功能特性，而不是安全行为。
Android学习个人笔记-百度地图定位sdk的使用
iceyung的专栏
05-10 2196
虽然自己已经完成了百度地图的调用，但是在使用过程中产生很多的疑问，在不断的百度各种大神的作品后才慢慢的调试出来，所以觉得作为新手自己应该把这个过程记录下来。尤其是自己在找到大神的文章时，并不能理解有些单纯一个方法和一个解释，主要还是水平有限，在查资料的过程中也深知写好一篇博文对于需要的人来说就是一汪泉水，欣喜的发现这篇博文讲的有头由尾，可以参照一步一步的来进行。记录下来这个过程对于自己也是一种复习
vue中全屏screenfull使用过程中报错总结
weixin_44224712的博客
06-21 4217
vue中全屏目前实现大体有两种：一种时浏览器自带的。
TypeError: fullscreen error at HTMLInputElement.toggleFullscreen 报错原因与解决方案
陈先生的博客
08-17 1868
在使用iframe进行内容嵌套时候,如果内层页面有全屏的功能，点击内层全屏功能，就可能出现上述报错。
as一些安全限制
As_Js_Python的专栏
08-05 567
(1)全屏之后如果不是AIR默认是不能用键盘交互的； 如果非要的话  参考 ：  http://blog.csdn.net/zhizaibide1987/article/details/8293301            启用Flash Player 11.3的全屏键盘输入，注意以下事项：             1.-swf-version=16;              2.
【chrome】iframe与Permissions
不忘初心，坚定道路！
01-10 1341
最近在做iframe嵌套页面时，遇到了需要剪切板权限的问题，提示：Disabled in this document by Feature Policy.为此特意去学习延伸了下这方面的资料。
全屏模式fullscreen
多啦的博客
11-03 1万+
全屏模式fullscreen
vue-fullscreen:一个简单的全屏 Vue.js 组件
07-24
在不退出全屏的情况下导航到新页面 中文文档 支持 支持的浏览器 注意：为了在 Internet Explorer 中使用这个包，你需要一个 Promise polyfill。 注意：桌面和 iPad 支持 Safari，但 iPhone 不支持。 注意：导航...
Wordpress全屏读者「Wordpress Fullscreen Reader」-crx插件
03-09
在全屏模式下显示wordpress页面和文章，以方便...版本0.6.1：增加了在同一站点上的帖子之间切换时保持全屏的功能增加了全屏关闭后返回初始页面的选项更多错误修正版本0.5.1-0.5.3：错误修正和代码优化 支持语言:English
javascript fullscreen全屏实现代码
10-30
用了实现打开一个满屏的代码
[Windows] System Error Codes（GetLastError )0-----5999
Jacky_Dai的专栏
10-26 5893
[code="C++"] ERROR_SUCCESS 0 (0x0) The operation completed successfully. ERROR_INVALID_FUNCTION 1 (0x1) Incorrect function. ERROR_FILE_NOT_FOUND 2 (0x2) The system cannot find...
问题解决：系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的about_Execution_Policies
JJJ
08-15 1440
1 使用webpack打包的时候出现如下是错误。 百度发现， 首次在计算机上启动 Windows PowerShell 时，现用执行策略很可能是 Restricted（默认设置）。Restricted 策略不允许任何脚本运行。 所有要手动开启允许脚本运行。 2 解决过程 2.1 win+x 打开PowerShell（管理员） 2.2 输入set-ExecutionPolicy RemoteSigned ，输入a或者y 2.3 测试是否更改成功：输入get-executionpolicy结果为Re
Android 特许权限白名单
u012514113的专栏
06-27 4505
Android 特许权限白名单配置方法
(mantis1.1.1)config_defaults_inc.php
吹云专栏
05-15 4906
# Mantis - a php based bugtracking system# Copyright (C) 2000 - 2002  Kenzaburo Ito - [email protected]# Copyright (C) 2002 - 2007  Mantis Team   - [email protected]# Mantis is f
screenfull全屏后下拉框失效
08-24
根据引用内容，当使用screenfull进行全屏后，下拉框可能会失效。根据引用[1]和引用的描述，可能的原因是在全屏模式下，下拉框没有正确地放置在页面的body中，导致无法正常显示。为了解决这个问题，可以尝试修改代码，将下拉框的属性设置为在全屏模式下也将其放置在body中。具体来说，可以尝试使用`:append-to-body`属性，并根据全屏标志（如`fullscreenFlag`）来决定是否将下拉框放置在body中。这样，在全屏模式下，下拉框应该能够正常显示。记得在使用之前先安装相关依赖（如screenfull）。具体代码示例可参考引用中的内容。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue-fullscreen全屏下elementui 日期下拉框 不出来，非全屏，下拉框可以出来，全屏下拉框不出来（发版）](https://blog.csdn.net/qq_32758159/article/details/121145127)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [Vue使用screenfull实现全屏效果](https://download.csdn.net/download/weixin_38731385/14687350)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值