【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>
相关推荐
小陈工3 小时前
Python Web开发入门(十七):Vue.js与Python后端集成——让前后端真正“握手言和“
开发语言·前端·javascript·数据库·vue.js·人工智能·python
xiaotao1317 小时前
第九章:Vite API 参考手册
前端·vite·前端打包
午安~婉7 小时前
Electron桌面应用聊天(续)
前端·javascript·electron
彧翎Pro8 小时前
基于 RO1 noetic 配置 robosense Helios 32(速腾) & xsense mti 300
前端·jvm
小码哥_常8 小时前
解锁系统设置新姿势:Activity嵌入全解析
前端
之歆8 小时前
前端存储方案对比:Cookie-Session-LocalStorage-IndexedDB
前端
哟哟耶耶8 小时前
vue3-单文件组件css功能(:deep,:slotted,:global,useCssModule,v-bind)
前端·javascript·css
是罐装可乐8 小时前
深入理解“句柄(Handle)“:从浏览器安全到文件系统访问
前端·javascript·安全
华科易迅9 小时前
Vue如何集成封装Axios
前端·javascript·vue.js
康一夏9 小时前
Next.js 13变化有多大?
前端·react·nextjs