HTML iframe 标签

一、什么是 <iframe> ?

<iframe> 是一个内联框架，用于在当前HTML文档中嵌入另一个独立的HTML页面。它就像一个"窗口"，通过它可以加载并显示另一个网页的内容，且该内容拥有独立的 DOM、CSS、JavaScript环境。

基本语法如下：

    <iframe src="https://example.com" width="600" height="400" frameborder="0"></iframe>

二、核心属性

• src：嵌入页面的 URL
• width / height：尺寸（可设为 100%）
• title：描述 iframe内容
• loading="lazy"：懒加载
• sandbox：启用安全沙箱
• allowfullscreen：允许嵌入的网页全屏显示，需要全屏API的支持。
• frameborder：是否绘制边框，0为不绘制，1为绘制（默认值）。建议尽量少用这个属性，而是在CSS里面设置样式。

三、sandbox 沙箱机制（安全核心！）

这是<iframe>最重要的安全特性。启用后，默认禁止几乎所有危险操作，除非显式授权。

常用sandbox指令：

• （空值）：最严格：禁止脚本、表单提交、弹窗、同源访问等。
• allow-scripts：允许执行JavaScript
• allow-same-origin：允许被视为同源（谨慎！若同时允许脚本，可能绕过沙箱）
• allow-forms：允许提交表单
• allow-popups：允许 window.open()
• allow-top-navigation：允许跳转顶层页面（危险！）

四、跨域通信：postMessage API

由于同源策略，父页面与iframe不能直接访问对方DOM或JS变量。但可通过postMessage安全通信。

父页面 -> iframe

// 父页面
const iframe = document.getElementById('my-iframe')
iframe.contentWindow.postMessage(
    { type: 'AUTH', token: 'xxx' },
    'https://trusted-oframe.com' //指定目标 origin，防泄漏
)

iframe -> 父页面

// iframe 内部
window.parent.postMessage(
    { type: 'RESIZE', height: 800 },
    '*' // 或指定父页面 origin
)

监听消息（双方都要）

window.addEventListener('message', (event) => {
    if (event.origin !== 'https://expected-parent.com') return
    if (event.data.type === 'AUTH') {
        // 处理token
    }
})

五、性能优化建议

• 懒加载：<iframe loading="lazy"> 减少首屏压力
• 按需加载：用户点击"展开"后再设置 src
• 避免深层嵌套：iframe 嵌套 iframe 会导致性能雪崩