文章目录
常见用法
- 添加剪贴板复制粘贴权限
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>