iframe 完全指南：从入门到放弃再到微前端

Simon Lv2
  2025-09-11 11:35:05 2025-09-11 11:35:05 创建   2025-09-11 11:44:18 2025-09-11 11:44:18 更新    

iframe，那个让人又爱又恨的标签

各位小伙伴们，今天咱们来聊一聊 iframe 这个”古老”的 HTML 标签。说它古老，是因为它从 HTML 4 时代就存在了；说它现代，是因为在微前端概念火热的今天，iframe 又重新回到了我们的视野中。

就像那句话说的：”出来混，迟早要还的”，iframe 也是如此——曾经被我们嫌弃的技术，现在又成了解决复杂问题的利器。

第一章：iframe 基础知识大扫盲

1.1 什么是 iframe？

iframe（inline frame）是 HTML 中的一个标签，用于在当前页面中嵌入另一个 HTML 页面。简单来说，就是”页面套页面”，就像俄罗斯套娃一样。

<!-- 最简单的 iframe 示例 -->
<iframe src="https://www.example.com"></iframe>

1.2 iframe 的基本属性

让我们来看看 iframe 有哪些常用属性：

<iframe 
  src="https://www.example.com"           <!-- 嵌入页面的URL -->
  width="800"                             <!-- 宽度 -->
  height="600"                            <!-- 高度 -->
  frameborder="0"                         <!-- 边框（已废弃，建议用CSS） -->
  scrolling="auto"                        <!-- 滚动条设置 -->
  sandbox="allow-scripts allow-forms"     <!-- 安全沙箱 -->
  loading="lazy"                          <!-- 懒加载 -->
  name="myFrame"                          <!-- 框架名称 -->
  title="嵌入的页面">                      <!-- 无障碍标题 -->
</iframe>

1.3 现代化的 iframe 样式

既然 frameborder 属性已经被废弃，我们来看看如何用 CSS 美化 iframe：

.modern-iframe {
  width: 100%;
  height: 500px;
  border: none;                    /* 去除边框 */
  border-radius: 8px;             /* 圆角 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 阴影 */
  transition: transform 0.3s ease; /* 过渡效果 */
}

.modern-iframe:hover {
  transform: scale(1.02);          /* 悬停放大效果 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .modern-iframe {
    height: 300px;
  }
}

第二章：iframe 的通信机制

2.1 同源政策的”紧箍咒”

在讲通信之前，我们必须先了解同源政策。浏览器的同源政策规定，只有协议、域名、端口都相同的页面才能自由访问彼此的内容。

// 同源示例
// 主页面：https://www.example.com:8080/page1
// iframe页面：https://www.example.com:8080/page2  ✅ 同源

// 不同源示例
// 主页面：https://www.example.com
// iframe页面：https://www.google.com  ❌ 不同源

2.2 postMessage：跨域通信的救星

postMessage API 是 HTML5 提供的跨域通信解决方案，就像给不同域的页面之间架起了一座桥梁。

父页面向 iframe 发送消息

<!-- 父页面 index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>父页面</title>
</head>
<body>
    <h1>我是父页面</h1>
    <button id="sendBtn">向iframe发送消息</button>
    <iframe id="myFrame" src="child.html" width="600" height="400"></iframe>
    
    <script>
        const iframe = document.getElementById('myFrame');
        const sendBtn = document.getElementById('sendBtn');
        
        sendBtn.addEventListener('click', () => {
            // 向 iframe 发送消息
            iframe.contentWindow.postMessage({
                type: 'GREETING',
                message: '你好，iframe！',
                timestamp: Date.now()
            }, '*'); // '*' 表示任意源，生产环境建议指定具体域名
        });
        
        // 监听来自 iframe 的消息
        window.addEventListener('message', (event) => {
            console.log('收到iframe消息:', event.data);
            
            // 安全检查：验证消息来源
            if (event.origin !== window.location.origin) {
                console.warn('消息来源不受信任:', event.origin);
                return;
            }
            
            if (event.data.type === 'IFRAME_READY') {
                console.log('iframe已准备就绪');
            }
        });
    </script>
</body>
</html>

iframe 页面响应消息

<!-- 子页面 child.html -->
<!DOCTYPE html>
<html>
<head>
    <title>子页面</title>
    <style>
        body { 
            font-family: Arial, sans-serif; 
            padding: 20px;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
            color: white;
        }
    </style>
</head>
<body>
    <h2>我是iframe内的页面</h2>
    <div id="messageDisplay">等待父页面消息...</div>
    <button id="replyBtn">回复父页面</button>
    
    <script>
        const messageDisplay = document.getElementById('messageDisplay');
        const replyBtn = document.getElementById('replyBtn');
        
        // 监听来自父页面的消息
        window.addEventListener('message', (event) => {
            console.log('收到父页面消息:', event.data);
            
            if (event.data.type === 'GREETING') {
                messageDisplay.innerHTML = `
                    <p>收到消息: ${event.data.message}</p>
                    <p>时间戳: ${new Date(event.data.timestamp).toLocaleString()}</p>
                `;
            }
        });
        
        // 向父页面发送消息
        replyBtn.addEventListener('click', () => {
            window.parent.postMessage({
                type: 'IFRAME_REPLY',
                message: '我是iframe，收到了你的消息！',
                status: 'success'
            }, '*');
        });
        
        // 页面加载完成后通知父页面
        window.addEventListener('load', () => {
            window.parent.postMessage({
                type: 'IFRAME_READY'
            }, '*');
        });
    </script>
</body>
</html>

2.3 高级通信模式：事件系统

为了更好地管理复杂的通信场景，我们可以构建一个简单的事件系统：

// iframe-communicator.js - 通信管理器
class IframeCommunicator {
    constructor() {
        this.listeners = new Map();
        this.init();
    }
    
    init() {
        window.addEventListener('message', this.handleMessage.bind(this));
    }
    
    // 发送消息
    send(target, type, data = {}) {
        const message = {
            type,
            data,
            timestamp: Date.now(),
            id: this.generateId()
        };
        
        if (target === 'parent') {
            window.parent.postMessage(message, '*');
        } else if (target instanceof HTMLIFrameElement) {
            target.contentWindow.postMessage(message, '*');
        }
        
        return message.id;
    }
    
    // 监听消息
    on(type, callback) {
        if (!this.listeners.has(type)) {
            this.listeners.set(type, []);
        }
        this.listeners.get(type).push(callback);
    }
    
    // 移除监听器
    off(type, callback) {
        if (this.listeners.has(type)) {
            const callbacks = this.listeners.get(type);
            const index = callbacks.indexOf(callback);
            if (index > -1) {
                callbacks.splice(index, 1);
            }
        }
    }
    
    // 处理接收到的消息
    handleMessage(event) {
        const { type, data } = event.data;
        
        if (this.listeners.has(type)) {
            this.listeners.get(type).forEach(callback => {
                callback(data, event);
            });
        }
    }
    
    // 生成唯一ID
    generateId() {
        return Math.random().toString(36).substr(2, 9);
    }
}

// 使用示例
const communicator = new IframeCommunicator();

// 监听特定类型的消息
communicator.on('user-login', (data) => {
    console.log('用户登录:', data);
});

// 发送消息到父页面
communicator.send('parent', 'page-ready', {
    url: window.location.href,
    title: document.title
});

第三章：iframe 的安全性考虑

3.1 沙箱属性：给 iframe 带上”手铐”

sandbox 属性是 iframe 的安全神器，它可以限制嵌入页面的行为：

<!-- 最严格的沙箱：几乎什么都不能做 -->
<iframe src="untrusted.html" sandbox></iframe>

<!-- 允许脚本执行和表单提交 -->
<iframe src="semi-trusted.html" 
        sandbox="allow-scripts allow-forms">
</iframe>

<!-- 常用的沙箱组合 -->
<iframe src="third-party.html" 
        sandbox="allow-scripts 
                 allow-forms 
                 allow-popups 
                 allow-same-origin">
</iframe>

sandbox 属性的可选值：

  • allow-forms: 允许表单提交
  • allow-scripts: 允许脚本执行
  • allow-same-origin: 允许同源访问
  • allow-popups: 允许弹窗
  • allow-top-navigation: 允许导航到顶级窗口
  • allow-downloads: 允许下载文件

3.2 Content Security Policy (CSP)

CSP 可以控制哪些页面可以被嵌入到 iframe 中：

<!-- 在被嵌入的页面中设置 -->
<meta http-equiv="Content-Security-Policy" 
      content="frame-ancestors 'self' https://trusted-site.com;">

3.3 防止点击劫持攻击

/* 防止页面被恶意嵌入 */
html {
    /* 如果页面被嵌入到 iframe 中，则隐藏内容 */
    display: none;
}

/* 如果是顶级窗口，则显示内容 */
html[data-top-window="true"] {
    display: block;
}
// 检测是否在 iframe 中
if (window.self === window.top) {
    document.documentElement.setAttribute('data-top-window', 'true');
} else {
    // 在 iframe 中，进行安全检查
    try {
        if (window.parent.location.hostname !== 'trusted-domain.com') {
            document.body.innerHTML = '此页面不允许在当前域中显示';
        }
    } catch (e) {
        // 跨域访问被阻止，这是正常的安全机制
        console.log('跨域访问检查正常');
    }
}

第四章：iframe 的实战应用场景

4.1 嵌入第三方内容

这是 iframe 最经典的用法，比如嵌入地图、视频、社交媒体内容等：

<!-- 嵌入Google地图 -->
<iframe 
  src="https://www.google.com/maps/embed?pb=!1m18!1m12..."
  width="600" 
  height="450" 
  style="border:0;" 
  allowfullscreen="" 
  loading="lazy">
</iframe>

<!-- 嵌入YouTube视频 -->
<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen>
</iframe>

<!-- 嵌入Twitter内容 -->
<iframe 
  src="https://platform.twitter.com/widgets/tweet_button.html" 
  width="120" 
  height="20">
</iframe>

4.2 构建沙箱环境

有时我们需要运行不受信任的代码，iframe 提供了很好的隔离环境：

<!-- 代码运行沙箱 -->
<div class="code-sandbox">
    <textarea id="codeInput" placeholder="输入你的HTML代码...">
<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 20px; }
        .demo { background: #f0f0f0; padding: 10px; border-radius: 5px; }
    </style>
</head>
<body>
    <div class="demo">
        <h2>Hello World!</h2>
        <p>这是一个演示页面</p>
        <button onclick="alert('Hello!')">点击我</button>
    </div>
</body>
</html>
    </textarea>
    <button id="runCode">运行代码</button>
    <iframe id="sandbox" 
            sandbox="allow-scripts" 
            style="width: 100%; height: 300px; border: 1px solid #ccc;">
    </iframe>
</div>

<script>
document.getElementById('runCode').addEventListener('click', function() {
    const code = document.getElementById('codeInput').value;
    const sandbox = document.getElementById('sandbox');
    
    // 创建blob URL来运行用户代码
    const blob = new Blob([code], { type: 'text/html' });
    const url = URL.createObjectURL(blob);
    
    sandbox.src = url;
    
    // 清理旧的URL
    sandbox.onload = function() {
        URL.revokeObjectURL(url);
    };
});
</script>

4.3 创建模态框和弹窗

<!-- 模态框式的iframe -->
<div class="modal-overlay" id="modalOverlay" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3>外部内容</h3>
            <button class="close-btn" onclick="closeModal()">&times;</button>
        </div>
        <iframe id="modalIframe" 
                src="" 
                width="100%" 
                height="400"
                frameborder="0">
        </iframe>
    </div>
</div>

<style>
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    border-radius: 8px;
    width: 80%;
    max-width: 800px;
    max-height: 80%;
    overflow: hidden;
}

.modal-header {
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}
</style>

<script>
function openModal(url) {
    document.getElementById('modalIframe').src = url;
    document.getElementById('modalOverlay').style.display = 'flex';
}

function closeModal() {
    document.getElementById('modalOverlay').style.display = 'none';
    document.getElementById('modalIframe').src = '';
}

// 使用示例
// openModal('https://www.example.com');
</script>

第五章：iframe 的性能优化

5.1 懒加载：按需加载

<!-- 使用 loading="lazy" 属性 -->
<iframe 
  src="heavy-content.html" 
  loading="lazy"
  width="600" 
  height="400">
</iframe>

5.2 预加载和预连接

<!-- 预连接到iframe将要加载的域名 -->
<link rel="preconnect" href="https://example.com">
<link rel="dns-prefetch" href="https://example.com">

<!-- 预加载iframe内容 -->
<link rel="prefetch" href="https://example.com/iframe-content.html">

5.3 动态创建 iframe

// 动态创建iframe的优化版本
class LazyIframe {
    constructor(container, src, options = {}) {
        this.container = container;
        this.src = src;
        this.options = {
            width: '100%',
            height: '400px',
            loading: 'lazy',
            ...options
        };
        this.iframe = null;
        this.observer = null;
        
        this.init();
    }
    
    init() {
        // 创建占位符
        this.createPlaceholder();
        
        // 设置交叉观察器
        this.setupIntersectionObserver();
    }
    
    createPlaceholder() {
        const placeholder = document.createElement('div');
        placeholder.className = 'iframe-placeholder';
        placeholder.style.cssText = `
            width: ${this.options.width};
            height: ${this.options.height};
            background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
                        linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
                        linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
                        linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
            background-size: 20px 20px;
            background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-family: Arial, sans-serif;
            border: 1px solid #ddd;
            border-radius: 4px;
        `;
        placeholder.innerHTML = '正在加载内容...';
        
        this.container.appendChild(placeholder);
        this.placeholder = placeholder;
    }
    
    setupIntersectionObserver() {
        this.observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    this.loadIframe();
                    this.observer.disconnect();
                }
            });
        }, { threshold: 0.1 });
        
        this.observer.observe(this.placeholder);
    }
    
    loadIframe() {
        this.iframe = document.createElement('iframe');
        Object.assign(this.iframe, {
            src: this.src,
            width: this.options.width,
            height: this.options.height,
            frameBorder: '0',
            loading: this.options.loading
        });
        
        // 应用其他选项
        if (this.options.sandbox) {
            this.iframe.sandbox = this.options.sandbox;
        }
        
        // 添加加载事件
        this.iframe.onload = () => {
            console.log('Iframe loaded successfully');
            if (this.options.onLoad) {
                this.options.onLoad(this.iframe);
            }
        };
        
        // 替换占位符
        this.container.replaceChild(this.iframe, this.placeholder);
    }
}

// 使用示例
const container = document.getElementById('iframe-container');
new LazyIframe(container, 'https://example.com', {
    height: '500px',
    sandbox: 'allow-scripts allow-same-origin',
    onLoad: (iframe) => {
        console.log('自定义加载完成处理');
    }
});

第六章：iframe 的常见问题与解决方案

6.1 高度自适应问题

这是使用 iframe 时最常遇到的问题之一：

// 解决iframe高度自适应的通用方案
class AutoResizeIframe {
    constructor(iframe) {
        this.iframe = iframe;
        this.init();
    }
    
    init() {
        // 监听来自iframe的消息
        window.addEventListener('message', this.handleMessage.bind(this));
        
        // iframe加载完成后发送初始化消息
        this.iframe.onload = () => {
            this.requestResize();
        };
    }
    
    handleMessage(event) {
        // 验证消息来源
        if (event.source !== this.iframe.contentWindow) {
            return;
        }
        
        if (event.data.type === 'resize') {
            this.resizeIframe(event.data.height);
        }
    }
    
    requestResize() {
        try {
            this.iframe.contentWindow.postMessage({
                type: 'requestResize'
            }, '*');
        } catch (e) {
            console.log('无法发送消息到iframe，可能是跨域限制');
        }
    }
    
    resizeIframe(height) {
        this.iframe.style.height = height + 'px';
        console.log('Iframe高度调整为:', height);
    }
}

// 在iframe内部页面中添加的脚本
const iframeResizeScript = `
<script>
    // 发送当前高度到父页面
    function sendHeight() {
        const height = Math.max(
            document.body.scrollHeight,
            document.body.offsetHeight,
            document.documentElement.clientHeight,
            document.documentElement.scrollHeight,
            document.documentElement.offsetHeight
        );
        
        window.parent.postMessage({
            type: 'resize',
            height: height
        }, '*');
    }
    
    // 监听父页面的请求
    window.addEventListener('message', function(event) {
        if (event.data.type === 'requestResize') {
            sendHeight();
        }
    });
    
    // 监听内容变化
    if (window.ResizeObserver) {
        const observer = new ResizeObserver(sendHeight);
        observer.observe(document.body);
    } else {
        // 降级方案：定期检查
        setInterval(sendHeight, 1000);
    }
    
    // 页面加载完成后发送一次
    window.addEventListener('load', sendHeight);
</script>
`;

6.2 滚动条问题

/* 隐藏iframe滚动条但保持滚动功能 */
.iframe-container {
    width: 600px;
    height: 400px;
    overflow: hidden;
    border: 1px solid #ccc;
}

.iframe-container iframe {
    width: calc(100% + 17px); /* 隐藏右侧滚动条 */
    height: calc(100% + 17px); /* 隐藏底部滚动条 */
    border: none;
}

6.3 移动端适配

/* 移动端iframe优化 */
@media (max-width: 768px) {
    .responsive-iframe-container {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%; /* 16:9 宽高比 */
        overflow: hidden;
    }
    
    .responsive-iframe-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
}

第七章：从 iframe 到微前端

7.1 传统架构的痛点

在讲微前端之前，我们先来看看传统的单体前端架构面临的问题：

传统单体应用架构：
┌─────────────────────────────────────┐
│         单体前端应用                  │
│  ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐   │
│  │模块A│ │模块B│ │模块C│ │模块D│   │
│  └─────┘ └─────┘ └─────┘ └─────┘   │
│         共享依赖和构建               │
└─────────────────────────────────────┘

痛点：
- 技术栈绑定：所有模块必须使用相同技术栈
- 部署耦合：一个模块的更新需要整个应用重新部署
- 团队协作困难：多个团队共享一个代码库
- 代码复用困难：模块之间耦合度高

7.2 iframe 作为微前端的早期实践

iframe 实际上是最早的”微前端”实现方式：

<!-- 基于iframe的微前端架构 -->
<div class="micro-frontend-container">
    <!-- 导航栏 -->
    <nav class="main-nav">
        <button onclick="loadModule('user-management')">用户管理</button>
        <button onclick="loadModule('order-system')">订单系统</button>
        <button onclick="loadModule('analytics')">数据分析</button>
    </nav>
    
    <!-- 内容区域 -->
    <main class="content-area">
        <iframe id="moduleFrame" 
                name="moduleFrame"
                width="100%" 
                height="600"
                frameborder="0">
        </iframe>
    </main>
</div>

<script>
// 模块路由表
const moduleRoutes = {
    'user-management': 'https://user-app.company.com',
    'order-system': 'https://order-app.company.com',
    'analytics': 'https://analytics-app.company.com'
};

// 加载指定模块
function loadModule(moduleName) {
    const iframe = document.getElementById('moduleFrame');
    const moduleUrl = moduleRoutes[moduleName];
    
    if (moduleUrl) {
        // 显示加载状态
        showLoading();
        
        iframe.src = moduleUrl;
        iframe.onload = () => {
            hideLoading();
            
            // 通知模块已加载
            iframe.contentWindow.postMessage({
                type: 'MODULE_LOADED',
                module: moduleName,
                context: getUserContext()
            }, '*');
        };
    }
}

// 获取用户上下文
function getUserContext() {
    return {
        userId: '12345',
        token: localStorage.getItem('authToken'),
        permissions: ['read', 'write']
    };
}
</script>

7.3 现代微前端框架

虽然 iframe 可以实现微前端，但它有一些局限性。现代微前端框架如 qiankun、single-spa 等提供了更好的解决方案：

// 使用qiankun的微前端示例
import { registerMicroApps, start } from 'qiankun';

// 注册微应用
registerMicroApps([
    {
        name: 'react-app',
        entry: '//localhost:3000',
        container: '#react-container',
        activeRule: '/react',
    },
    {
        name: 'vue-app', 
        entry: '//localhost:8080',
        container: '#vue-container',
        activeRule: '/vue',
    },
]);

// 启动微前端
start();

7.4 iframe 方案 vs 现代微前端方案对比

特性 iframe方案 现代微前端
隔离性 ✅ 完全隔离 ⚠️ 需要额外配置
通信复杂度 ❌ 复杂的postMessage ✅ 简单的全局状态
SEO友好 ❌ 搜索引擎难以索引 ✅ 可以优化
用户体验 ❌ 页面切换有刷新感 ✅ 无缝切换
资源共享 ❌ 无法共享 ✅ 可以共享依赖
  • 标题: iframe 完全指南：从入门到放弃再到微前端
  • 作者: Simon
  • 创建于 : 2025-09-11 11:35:05
  • 更新于 : 2025-09-11 11:44:18
  • 链接: https://www.simonicle.cn/2025/09/11/iframe 完全指南：从入门到放弃再到微前端/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
推荐阅读
【秋招准备】面试手撕大集合 【秋招准备】面试手撕大集合 React渲染时机完全指南：从一个电商组件的优化说起 React渲染时机完全指南：从一个电商组件的优化说起 【秋招备战】计算机网络 【秋招备战】计算机网络
推荐阅读
【秋招准备】面试手撕大集合 【秋招准备】面试手撕大集合 React渲染时机完全指南：从一个电商组件的优化说起 React渲染时机完全指南：从一个电商组件的优化说起
评论
目录
iframe 完全指南：从入门到放弃再到微前端
  1. iframe，那个让人又爱又恨的标签
  2. 第一章：iframe 基础知识大扫盲
    1. 1.1 什么是 iframe？
    2. 1.2 iframe 的基本属性
    3. 1.3 现代化的 iframe 样式
  3. 第二章：iframe 的通信机制
    1. 2.1 同源政策的”紧箍咒”
    2. 2.2 postMessage：跨域通信的救星
    3. 2.3 高级通信模式：事件系统
  4. 第三章：iframe 的安全性考虑
    1. 3.1 沙箱属性：给 iframe 带上”手铐”
    2. 3.2 Content Security Policy (CSP)
    3. 3.3 防止点击劫持攻击
  5. 第四章：iframe 的实战应用场景
    1. 4.1 嵌入第三方内容
    2. 4.2 构建沙箱环境
    3. 4.3 创建模态框和弹窗
  6. 第五章：iframe 的性能优化
    1. 5.1 懒加载：按需加载
    2. 5.2 预加载和预连接
    3. 5.3 动态创建 iframe
  7. 第六章：iframe 的常见问题与解决方案
    1. 6.1 高度自适应问题
    2. 6.2 滚动条问题
    3. 6.3 移动端适配
  8. 第七章：从 iframe 到微前端
    1. 7.1 传统架构的痛点
    2. 7.2 iframe 作为微前端的早期实践
    3. 7.3 现代微前端框架
    4. 7.4 iframe 方案 vs 现代微前端方案对比