iframe 通信概述

iframe 是一种 HTML 元素，用于在一个网页中嵌入另一个网页，由于安全限制，不同域的 iframe 之间默认情况下不能直接进行通信，为了实现跨域 iframe 通信，通常使用以下几种方法：postMessage、document.domain 和 window.name。

一、postMessage

postMessage 是 HTML5 提供的一种跨文档消息传递机制，可以安全地实现跨域 iframe 通信。

1、基本用法

父窗口向 iframe 发送消息：iframeWindow.postMessage(message, targetOrigin)

iframe 向父窗口发送消息：window.parent.postMessage(message, targetOrigin)

接收消息：通过监听message 事件来接收消息。

2、示例

父窗口代码：

        const iframe = document.getElementById('myIframe');
        iframe.onload = function() {
            iframe.contentWindow.postMessage('Hello from parent', 'https://example.com');
        };
        window.addEventListener('message', function(event) {
            if (event.origin === 'https://example.com') {
                console.log('Message from iframe:', event.data);
            }
        });

iframe 页面代码：

        window.addEventListener('message', function(event) {
            if (event.origin === 'https://parent.com') {
                console.log('Message from parent:', event.data);
                event.source.postMessage('Hello from iframe', event.origin);
            }
        });

二、document.domain

如果两个页面的顶级域名相同，可以通过设置相同的document.domain 来实现跨域通信。

1、步骤

在两个页面中都将document.domain 设置为相同的值，例如document.domain = "example.com";。

然后就可以像在同一个域中一样进行通信。

2、注意事项

只能设置为主域，不能设置为子域。

必须在页面加载之前设置，否则会违反同源策略。

三、window.name

利用window.name 可以在刷新页面时保持数据，从而实现简单的跨域通信。

1、原理

父窗口设置window.name 为一个包含数据的对象，然后刷新 iframe。

iframe 读取window.name 获取数据。

2、示例

父窗口代码：

        const iframe = document.getElementById('myIframe');
        iframe.src = 'iframe.html';
        iframe.onload = function() {
            iframe.contentWindow.location.reload();
            iframe.contentWindow.name = JSON.stringify({ message: 'Hello from parent' });
        };

iframe 页面代码：

        window.onload = function() {
            if (window.name) {
                const data = JSON.parse(window.name);
                console.log('Data from parent:', data);
            }
        };

FAQs

问题 1：为什么需要跨域 iframe 通信？

答：在实际应用中，可能会遇到需要在主页面中嵌入第三方网页或组件的情况，而这些第三方网页可能位于不同的域，此时就需要进行跨域通信，以实现数据的交互和功能的协作。

问题 2：postMessage 的优势是什么？

答：postMessage 提供了一种安全可靠的跨域通信方式，它允许指定目标域，避免了数据泄露的风险，它可以传输各种类型的数据，包括字符串、对象等，它还支持双向通信，即不仅可以从父窗口向 iframe 发送消息，也可以从 iframe 向父窗口发送消息。