iframe 就像是 HTML 的「内嵌画布」，允许在页面中加载独立网页，如同在画布上叠加另一幅动态画卷。核心特性包括：

• 独立上下文：每个 iframe 都拥有独立的 DOM/CSS/JS 环境（类似浏览器中的浏览器）
• 异步加载：不会阻塞主页面渲染
• 沙盒隔离：天然实现样式和脚本隔离

常见应用场景：

1. 第三方服务嵌入：广告、支付、地图等（如嵌入高德地图）
2. 微前端架构：通过 iframe 组合多个独立子系统（大部分的微前端框架不是靠这个，特别说明下）
3. 文档预览：PDF/Office 文件在线展示
4. 沙盒实验环境：代码在线编辑器的预览窗口

性能优化

1. 懒加载策略

<!-- 原生属性实现 -->
<iframe loading="lazy" data-src="chart.html"></iframe>

<!-- Vue动态加载 -->
<template>
  <iframe v-if="isVisible" :src="url"></iframe>
</template>

通过 IntersectionObserver 监听可视区域，提升 scroll 事件性能

2. 资源预加载

<link rel="preload" href="chart.html" as="iframe">

3. 代码分割

Webpack 动态导入 + iframe 按需加载：

// page1.js
export function loadPage1() {
    // 创建 iframe 元素
    const iframe = document.createElement('iframe');
    // 设置 iframe 的源为 page1.html
    iframe.src = 'page1.html';
    // 将 iframe 添加到页面中
    document.body.appendChild(iframe);
}

const loadModule = () => import('./page1.js')

跨域通信全攻略

1. postMessage 安全通信

// 父页面发送
iframeEl.contentWindow.postMessage('数据', 'https://子域名')

// 子页面接收
window.addEventListener('message', (e) => {
  if(e.origin !== 'https://父域名') return
  console.log(e.data)
})

2. 同源策略突破方案

3. 无界微前端方案

通过 Shadow DOM + iframe 黑科技实现：

// 创建 ShadowRoot
const shadow = host.attachShadow({ mode: 'open' })

// 动态创建 iframe
const iframe = document.createElement('iframe')
iframe.src = '//子应用域名/path'
shadow.appendChild(iframe)

实现路由同步、DOM 穿透等高级功能

安全防护

1. 沙盒属性：

<iframe sandbox="allow-scripts allow-same-origin"></iframe>

2. 内容安全策略：

Content-Security-Policy: frame-ancestors 'self'

Content-Security-Policy: frame-ancestors 'self' 是 HTTP 响应头 Content-Security-Policy（CSP）的一个指令。

• frame-ancestors 指令用于限制哪些页面可以通过 <frame>、<iframe>、<object>、<embed> 或 <applet> 等标签嵌入当前页面。
• 'self' 是一个关键字，表示只允许当前页面的源（协议、域名和端口都相同）的页面作为嵌入的祖先页面。也就是说，只有与当前页面同源的页面才能将当前页面嵌入到自己的框架中。

3. 点击劫持防御：

if(top !== self) top.location.href = self.location.href

高频面试题精选

1. iframe 的优缺点是什么？
   优：隔离性强、支持异步加载、跨域解决方案多
   缺：SEO 不友好、性能消耗大、通信复杂度高
2. 如何实现 iframe 自适应高度？
   通过 contentWindow 获取子页面高度，动态设置 iframe 高度（需注意跨域限制）
3. postMessage 如何防止 XSS 攻击？
   严格验证 origin 来源 + 数据序列化 + 避免执行字符串代码
4. 微前端场景下 iframe 的替代方案？
   Web Components / Qiankun 等方案，但 iframe 仍是隔离性最佳选择
5. 如何检测 iframe 加载失败？
   监听 error 事件 + 设置超时检测：

iframe.onerror = () => console.log('加载失败')
setTimeout(() => { if(!loaded) handleError() }, 5000)