如何通过postMessage进入iFrame？

postMessage 是一种安全的跨源通信机制，允许来自不同源的窗口之间进行通信。以下是如何使用 postMessage 向 iFrame 发送消息的基础概念、优势、类型、应用场景以及示例代码。

基础概念

postMessage 允许不同源的窗口之间传递消息，而不会受到同源策略的限制。这对于需要在不同域之间进行交互的应用非常有用。

优势

安全性：通过 postMessage 发送的消息可以被明确地指定接收方，减少了跨站脚本攻击（XSS）的风险。
灵活性：可以在不同的窗口或 iFrame 之间传递复杂的数据结构。
兼容性：几乎所有现代浏览器都支持 postMessage。

类型

发送消息：使用 window.postMessage 方法。
接收消息：通过监听 message 事件来接收消息。

应用场景

微前端架构：不同团队开发的微应用需要相互通信。
第三方内容嵌入：如广告、社交媒体插件等。
跨域数据共享：需要在不同域之间传递数据的场景。

示例代码

父页面发送消息到 `iFrame`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Page</title>
</head>
<body>
    <iframe id="myIframe" src="https://example.com/iframe.html"></iframe>
    <script>
        // 获取 iFrame 的 window 对象
        var iframe = document.getElementById('myIframe').contentWindow;

        // 发送消息到 iFrame
        iframe.postMessage('Hello from parent!', 'https://example.com');
    </script>
</body>
</html>

`iFrame` 接收消息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iFrame Page</title>
</head>
<body>
    <script>
        // 监听 message 事件
        window.addEventListener('message', function(event) {
            // 检查消息来源是否可信
            if (event.origin !== 'https://yourdomain.com') return;

            console.log('Message received:', event.data);
        });
    </script>
</body>
</html>