fenced frames 是 chromium 115+ 独有实验性 api，需启用特定运行时标志、permissions policy（fenced-frame=*）并用 js 动态创建 fencedframeconfig 加载，不支持 src 属性或传统 iframe 通信机制。
Fenced Frames 目前无法在标准 HTML 中直接启用——它不是 <iframe></iframe> 的替代语法，也不受 allow 属性或普通 CSP 控制；它是 Chromium 独有的实验性 API，必须配合 Permissions Policy 和运行时标志才能启用。
为什么 <fencedframe></fencedframe> 标签写进去没反应
浏览器会直接忽略该标签（不报错、不渲染），因为：当前仅 Chromium 115+ 在开启 --enable-features=PrivacySandboxAdsAPIs,RestrictFencedFramesToRootNavigation 且页面启用了对应策略时才解析该元素。主流 Safari、Firefox 完全不识别该标签，HTML 标准也未纳入。
- 检查 Chrome 版本：必须 ≥ 115，且启动时加参数（开发环境可用
chrome --enable-features=PrivacySandboxAdsAPIs,FencedFrames） - 页面需声明 Permissions Policy：
<meta http-equiv="Permissions-Policy" content="fenced-frame=*">或通过 HTTP Header -
<fencedframe></fencedframe>不支持src，只接受srcdoc或通过 JS 调用document.createElement('fencedframe')+config对象加载
如何用 JS 正确加载广告内容到 Fenced Frame
必须使用 FencedFrameConfig 构造配置对象，并通过 document.createElement('fencedframe') 动态插入——这是唯一合规路径，<fencedframe src="..."></fencedframe> 写法无效。
- 广告方需提前注册为可嵌入源（通过
document.fence.registerAdInterestGroup()或服务端生成加密配置） - 配置必须包含
url（指向广告方托管的 FLEDGE 兼容响应页）、size（宽高数组）、attributes（如{'mode': 'opaque-ad'}） - 示例关键代码：
const config = new FencedFrameConfig({ url: 'https://ad.example/fledge?render=1', size: [300, 250] });<br>const ff = document.createElement('fencedframe');<br>ff.config = config;<br>container.appendChild(ff);
Fenced Frames 和传统 <iframe></iframe> 的核心隔离差异
不是“更安全的 iframe”，而是从设计上切断所有跨上下文通信能力：无 postMessage、无 DOM 访问、无 Cookie 共享、无 referrer 透出、无 JavaScript 执行环境暴露——广告脚本完全运行在独立的、不可观测的沙箱中。
- 传统 iframe 可通过
window.parent、document.referrer、navigator.userAgent等获取宿主信息；Fenced Frame 这些全部返回空或默认值 - 广告渲染结果只能以位图形式合成进主页面（类似
<canvas></canvas>输出），无法触发点击事件冒泡，需依赖 Reporting API 回传归因数据 - 性能开销更高：每次加载都触发完整进程隔离和渲染管线重建，不适合高频切换或非广告场景
真正落地时，你得先确认广告合作方是否已支持 FLEDGE 渲染链路，再配好 Permissions Policy 和 Chrome 启动参数；漏掉任一环，<fencedframe></fencedframe> 都只是个透明空标签。它不是渐进式增强，而是一整套需要上下游协同的隐私沙箱基础设施。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
