【HTML】iframe 标签 allow 权限汇总(例如添加复制粘贴权限)

文章目录

常见用法

  • 添加剪贴板复制粘贴权限
html 复制代码
<!-- 同时启用读和写权限 -->
<iframe src="your-content.html" allow="clipboard-read;clipboard-write"></iframe>

属性扩展

  • allow 属性汇总
权限值 说明 & 应用场景
clipboard-write / clipboard-read 允许 iframe 中的脚本写入(复制)或读取(粘贴)系统剪贴板。注意:clipboard-read 因涉及用户隐私,通常限制更严格。
fullscreen 允许 iframe 中的内容通过 requestFullscreen() 方法全屏显示。
payment 允许跨域的 iframe 使用 Payment Request API(支付请求接口)。
camera 允许 iframe 访问用户的摄像头。
microphone 允许 iframe 访问用户的麦克风。
geolocation 允许 iframe 使用 Geolocation API 获取用户的地理位置。
display-capture 允许 iframe 使用 Screen Capture API 捕获屏幕内容(如共享屏幕)。
autoplay / playback 控制 iframe 内媒体内容的自动播放和播放行为。

1、基本用法:在 <iframe> 标签中直接设置 allow 属性。

html 复制代码
<!-- 允许 iframe 使用摄像头和麦克风 -->
<iframe src="https://example.com" allow="camera; microphone"></iframe>
html 复制代码
<!-- 允许 iframe 进入全屏模式 -->
<iframe src="https://example.com" allow="fullscreen"></iframe>

2、精细控制来源:你可以指定哪些来源可以拥有该权限。权限值后可以跟上允许的来源列表。

*:允许所有来源。

'self':仅允许同源(相同协议、域名和端口)的请求。

'src':仅允许来自 iframe src 属性所指 URL 的内容。

html 复制代码
<!-- 仅允许同源的内容使用地理位置功能 -->
<iframe src="https://example.com" allow="geolocation 'self'"></iframe>

3、组合多个策略:你可以同时启用多个特性,只需用分号 ; 分隔。

html 复制代码
<!-- 允许支付、自动播放,但禁止全屏 -->
<iframe src="https://example.com" allow="payment; autoplay; fullscreen 'none'"></iframe>
相关推荐
前端摸鱼匠21 小时前
Vue 3 的v-bind合并行为:讲解v-bind与普通属性合并的规则
前端·javascript·vue.js·前端框架·ecmascript
REDcker21 小时前
浏览器端Web程序性能分析与优化实战 DevTools指标与工程清单
开发语言·前端·javascript·vue·ecmascript·php·js
donecoding1 天前
一个 sudo 引发的血案:npm 全局包权限错乱彻底修复
前端·node.js·前端工程化
风骏时光牛马1 天前
Raku正则匹配与数据批量处理实操案例
前端
nbwenren1 天前
2026实测:Gemini 3 镜像站视觉能力实践——拍照原型图,一键生成 HTML+CSS 代码
前端·css·html
Lee川1 天前
Prisma 实战指南:像搭积木一样设计古诗词数据库
前端·数据库·后端
Linsk1 天前
Java和JavaScript的关系真是雷峰和雷峰塔的关系吗?
java·javascript·oracle
当时只道寻常1 天前
浏览器文本复制到剪贴板:企业级最佳实践
javascript
jinanwuhuaguo1 天前
(第二十九篇)OpenClaw 实时与具身的跃迁——从异步孤岛到数字世界的“原住民”
前端·网络·人工智能·重构·openclaw