【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>
相关推荐
qq_589666052 小时前
TypeScript 完整入门教程
前端·javascript·typescript
星栈独行3 小时前
翻完 Pi 源码:它和 Codex、Claude Code 有何不同
开发语言·javascript·人工智能·程序人生
落落Plus4 小时前
浏览器缓存机制详解
javascript·缓存·浏览器缓存
用户059540174465 小时前
LLM对话记忆测试踩坑实录:手工回归30分钟,自动化后2分钟发现3个隐藏Bug
前端·css
Ashley的成长之路7 小时前
前端性能优化实战手册·第2篇:资源加载策略全解
前端·性能优化·资源加载·http/3·性能优化实战·资源加载优化
浅水壁虎7 小时前
vue基础(第二章 )
前端·javascript·vue.js
界面开发小八哥7 小时前
界面控件DevExtreme v26.1新版亮点——支持Angular 22
前端·javascript·angular.js·devexpress·ui开发·devextreme
Getflare7 小时前
前端 + UI 设计 + AI:这不是三个工种,是一个新三角能力模型(附自检清单)
前端·人工智能·ui
oil欧哟7 小时前
我做了一个 Vibe Coding 术语学习站:VibeHub
前端·ai·agent·独立开发·vibe coding