html实现Fenced Frames隔离框架_html Fenced Frames隔离广告框架嵌入【技巧】

苏承栈
2026-10-12 • 👁 0人浏览过
Fenced Frames 是 Chromium 115+ 独有实验性 API，需启用特定运行时标志、Permissions Policy（fenced-frame=*）并用 JS 动态创建 FencedFrameConfig 加载，不支持 src 属性或传统 iframe 通信机制。 Fenced Frames 目前无法在标准 HTML 中直接启用——它不是
</code></div>的替代语法，也不受<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">allow</code></div>属性或普通 CSP 控制；它是 Chromium 独有的实验性 API，必须配合 Permissions Policy 和运行时标志才能启用。
为什么
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><fencedframe></code></div>
标签写进去没反应
浏览器会直接忽略该标签（不报错、不渲染），因为：当前仅 Chromium 115+ 在开启
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">--enable-features=PrivacySandboxAdsAPIs,RestrictFencedFramesToRootNavigation</code></div>
且页面启用了对应策略时才解析该元素。主流 Safari、Firefox 完全不识别该标签，HTML 标准也未纳入。
检查 Chrome 版本：必须 ≥ 115，且启动时加参数（开发环境可用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">chrome --enable-features=PrivacySandboxAdsAPIs,FencedFrames</code></div>
）
页面需声明 Permissions Policy：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><meta http-equiv="Permissions-Policy" content="fenced-frame=*"></code></div>
或通过 HTTP Header
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><fencedframe></code></div>
不支持
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">src</code></div>
，只接受
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">srcdoc</code></div>
或通过 JS 调用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">document.createElement('fencedframe')</code></div>
+
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">config</code></div>
对象加载
如何用 JS 正确加载广告内容到 Fenced Frame
必须使用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">FencedFrameConfig</code></div>
构造配置对象，并通过
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">document.createElement('fencedframe')</code></div>
动态插入——这是唯一合规路径，
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><fencedframe src="..."></code></div>
写法无效。
广告方需提前注册为可嵌入源（通过
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">document.fence.registerAdInterestGroup()</code></div>
或服务端生成加密配置）
配置必须包含
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">url</code></div>
（指向广告方托管的 FLEDGE 兼容响应页）、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">size</code></div>
（宽高数组）、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">attributes</code></div>
（如
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">{'mode': 'opaque-ad'}</code></div>
）
示例关键代码：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">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);</code></div>
Fenced Frames 和传统
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><iframe></code></div>
的核心隔离差异
不是“更安全的 iframe”，而是从设计上切断所有跨上下文通信能力：无 postMessage、无 DOM 访问、无 Cookie 共享、无 referrer 透出、无 JavaScript 执行环境暴露——广告脚本完全运行在独立的、不可观测的沙箱中。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
传统 iframe 可通过
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">window.parent</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">document.referrer</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">navigator.userAgent</code></div>
等获取宿主信息；Fenced Frame 这些全部返回空或默认值
广告渲染结果只能以位图形式合成进主页面（类似
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><canvas></code></div>
输出），无法触发点击事件冒泡，需依赖 Reporting API 回传归因数据
性能开销更高：每次加载都触发完整进程隔离和渲染管线重建，不适合高频切换或非广告场景
真正落地时，你得先确认广告合作方是否已支持 FLEDGE 渲染链路，再配好 Permissions Policy 和 Chrome 启动参数；漏掉任一环，
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><fencedframe></code></div>
都只是个透明空标签。它不是渐进式增强，而是一整套需要上下游协同的隐私沙箱基础设施。
                            </div>

                            <!-- 文章导航 -->
                            <nav class="jxgpc-article-nav" aria-label="文章导航">

    
                                <a href="http://www.jxgpc.com/pc/22621.html" class="jxgpc-article-nav-link jxgpc-article-nav-prev">
                                    <span>&#8249;</span>
                                    <div>
                                        <div class="jxgpc-article-nav-label">上一篇</div>
                                        <div class="jxgpc-article-nav-title">HTML5跳转出现404怎么排查_url与服务器配置检查【解答】</div>
                                    </div>
                                </a>
    


    
                                <a href="http://www.jxgpc.com/pc/22625.html" class="jxgpc-article-nav-link jxgpc-article-nav-next">
                                    <div>
                                        <div class="jxgpc-article-nav-label">下一篇</div>
                                        <div class="jxgpc-article-nav-title">从sohu弄下来的flash中展示图片的代码_广告代码</div>
                                    </div>
                                    <span>&#8250;</span>
                                </a>
    

                            </nav>
                        </div>
                    </article>

                    <!-- 相关文章列表 -->
                    <section class="jxgpc-content-section" style="margin-top: 20px;">
                        <h2 class="jxgpc-widget-title" style="margin-bottom: 20px;">相关文章</h2>
                        <ul class="jxgpc-article-list">

    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/22621.html" class="jxgpc-article-link">HTML5跳转出现404怎么排查_url与服务器配置检查【解答】</a>
                                <div class="jxgpc-article-meta">2026-10-12</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/22607.html" class="jxgpc-article-link">Axios和Ajax的区别是什么(详细介绍)</a>
                                <div class="jxgpc-article-meta">2026-10-12</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/22581.html" class="jxgpc-article-link">vue中使用window.open()参数示例详解</a>
                                <div class="jxgpc-article-meta">2026-10-12</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/22568.html" class="jxgpc-article-link">html标签dl、ul、ol 的使用详解</a>
                                <div class="jxgpc-article-meta">2026-10-12</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/22565.html" class="jxgpc-article-link">如何通过css transition实现flex布局子元素动画</a>
                                <div class="jxgpc-article-meta">2026-10-12</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/22561.html" class="jxgpc-article-link">利用CSS Grid实现响应式布局中只显示第一行流体高度卡片</a>
                                <div class="jxgpc-article-meta">2026-10-12</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/22550.html" class="jxgpc-article-link">常用的相对定位方法有哪些</a>
                                <div class="jxgpc-article-meta">2026-10-12</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/22625.html" class="jxgpc-article-link">从sohu弄下来的flash中展示图片的代码_广告代码</a>
                                <div class="jxgpc-article-meta">2026-10-12</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/22635.html" class="jxgpc-article-link">实例详解jQuery中过滤器的基本用法</a>
                                <div class="jxgpc-article-meta">2026-10-12</div>
                            </li>
    
                            <li class="jxgpc-article-item">
                                <a href="http://www.jxgpc.com/pc/22660.html" class="jxgpc-article-link">非常不错的svg教程</a>
                                <div class="jxgpc-article-meta">2026-10-12</div>
                            </li>
    

                        </ul>
                    </section>
                </div>

                <!-- 右侧边栏 -->
                <aside class="jxgpc-sidebar jxgpc-sidebar-right" aria-label="侧边栏">
    <!-- 推荐阅读 -->
    <div class="jxgpc-widget">
        <h3 class="jxgpc-widget-title">推荐阅读</h3>
        <div class="jxgpc-recommend-grid">

    
            <a href="http://www.jxgpc.com/pc/22660.html" class="jxgpc-recommend-item">
                <div class="jxgpc-recommend-thumb">
                    <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="非常不错的svg教程">
                </div>
                <div class="jxgpc-recommend-title">非常不错的svg教程</div>
            </a>
    
            <a href="http://www.jxgpc.com/pc/22635.html" class="jxgpc-recommend-item">
                <div class="jxgpc-recommend-thumb">
                    <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="实例详解jQuery中过滤器的基本用法">
                </div>
                <div class="jxgpc-recommend-title">实例详解jQuery中过滤器的基本用法</div>
            </a>
    
            <a href="http://www.jxgpc.com/pc/22625.html" class="jxgpc-recommend-item">
                <div class="jxgpc-recommend-thumb">
                    <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="从sohu弄下来的flash中展示图片的代码_广告代码">
                </div>
                <div class="jxgpc-recommend-title">从sohu弄下来的flash中展示图片的代码_广告代码</div>
            </a>
    
            <a href="http://www.jxgpc.com/pc/22622.html" class="jxgpc-recommend-item">
                <div class="jxgpc-recommend-thumb">
                    <img src="http://www.jxgpc.com/static/v3/images/article-6.jpg" alt="html实现Fenced Frames隔离框架_html Fenced Frames隔离广告框架嵌入【技巧】">
                </div>
                <div class="jxgpc-recommend-title">html实现Fenced Frames隔离框架_html Fenced Frames隔离广告框架嵌入【技巧】</div>
            </a>
    

        </div>
    </div>

    <!-- 最新文章 -->
    <div class="jxgpc-widget">
        <h3 class="jxgpc-widget-title">最新文章</h3>
        <ul class="jxgpc-article-list">

    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/22660.html" class="jxgpc-article-link">非常不错的svg教程</a>
                <div class="jxgpc-article-meta">2026-10-12</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/22635.html" class="jxgpc-article-link">实例详解jQuery中过滤器的基本用法</a>
                <div class="jxgpc-article-meta">2026-10-12</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/22625.html" class="jxgpc-article-link">从sohu弄下来的flash中展示图片的代码_广告代码</a>
                <div class="jxgpc-article-meta">2026-10-12</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/22622.html" class="jxgpc-article-link">html实现Fenced Frames隔离框架_html Fenced Frames隔离广告框架嵌入【技巧】</a>
                <div class="jxgpc-article-meta">2026-10-12</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/22621.html" class="jxgpc-article-link">HTML5跳转出现404怎么排查_url与服务器配置检查【解答】</a>
                <div class="jxgpc-article-meta">2026-10-12</div>
            </li>
    
            <li class="jxgpc-article-item">
                <a href="http://www.jxgpc.com/pc/22607.html" class="jxgpc-article-link">Axios和Ajax的区别是什么(详细介绍)</a>
                <div class="jxgpc-article-meta">2026-10-12</div>
            </li>
    

        </ul>
    </div>

    <!-- 热门标签 -->
    <div class="jxgpc-widget">
        <h3 class="jxgpc-widget-title">热门标签</h3>
        <div class="jxgpc-article-tag-list">

    
            <a href="http://www.jxgpc.com/tag/1596" class="jxgpc-article-tag-item">html</a>
    

        </div>
    </div>
</aside>
            </div>
        </div>
    </main>


    <!-- 页脚 -->
    <footer class="jxgpc-footer">
        <div class="jxgpc-container">
            <div class="jxgpc-footer-links" style="justify-content: center;">
                
                
                <a href="http://www.jxgpc.com/22.html" class="jxgpc-footer-link">免责声明</a>
                
                <a href="http://www.jxgpc.com/23.html" class="jxgpc-footer-link">关于我们</a>
                
                <a href="http://www.jxgpc.com/24.html" class="jxgpc-footer-link">联系我们</a>
                
                <a href="http://www.jxgpc.com/25.html" class="jxgpc-footer-link">投诉删除</a>
                
                <a href="http://www.jxgpc.com/26.html" class="jxgpc-footer-link">投稿须知</a>
                
                
            </div>
            <div class="jxgpc-footer-copyright" style="text-align: center; margin-top: 20px;">
                Copyright 2026
                 极星编程网
                版权所有
                 <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color: inherit;">黔ICP备2025063994号</a>
            </div>
            <div style="text-align: center; margin-top: 10px; font-size: 12px; color: #999;">免责声明：本站信息来源于网络，仅供学习使用，版权归原作者所有，如有不愿意被转载的情况，请联系QQ：182111886，通知我们删除已转载的信息。</div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button class="jxgpc-back-to-top" id="backToTop" aria-label="返回顶部">&#8679;</button>

    <!-- 公共脚本 -->
    <script src="http://www.jxgpc.com/static/v3/js/common.js"></script>
    
    <div class="hide">
    </div>
</body>
</html>