主框架如何与iframe通信？如何解决跨域？

主框架与 iframe 通信以及解决跨域问题，主要依靠以下几种方法：

1. postMessage API (推荐)

这是最常用且推荐的跨域通信方式，兼容性好，也相对安全。

• 主框架发送消息:

// 获取iframe对象
const iframe = document.getElementById('myIframe');

// 发送消息到iframe
iframe.contentWindow.postMessage(message, targetOrigin);

// message: 要发送的数据，可以是字符串、对象等，如果是对象，会被序列化成JSON字符串。
// targetOrigin:  指定消息的目标窗口的origin，"*"表示任何域，为了安全起见，建议指定具体的origin。

• iframe接收消息:

// 监听message事件
window.addEventListener('message', function(event) {
  // 检查消息来源是否可信
  if (event.origin === 'http://example.com') { //  替换成主框架的origin
    // 处理接收到的消息
    console.log('Received message:', event.data);

    // 可以根据消息内容进行相应的操作
  }
});

• iframe发送消息回主框架:

// 在iframe内部
parent.postMessage(message, targetOrigin); // parent 指向父窗口，即主框架

2. window.name 属性 (适用于单向通信)

window.name 属性值在不同页面跳转之间也能保留，可以利用这个特性进行跨域通信，但主要用于单向通信，从 iframe 向主框架传递数据。

• iframe设置数据:

window.name = JSON.stringify(data); // 将数据序列化成字符串

• 主框架获取数据:

// 获取iframe的name属性
const data = JSON.parse(document.getElementById('myIframe').contentWindow.name);

3. document.domain 属性 (仅限同主域)

如果主框架和 iframe 位于相同的顶级域名下（例如a.example.com 和 b.example.com），可以通过设置 document.domain 为相同的域名来实现通信。

• 主框架和 iframe 都设置:

document.domain = 'example.com';

设置完成后，就可以像操作同域 iframe 一样进行通信了。

4. 使用代理服务器 (后端方案)

如果前端无法直接通信，可以借助后端代理服务器进行数据转发。主框架和 iframe 都与后端服务器通信，由服务器进行数据交换。

5. JSONP (主要用于获取数据)

JSONP 主要用于从跨域服务器获取数据，而不是双向通信。它利用 <script> 标签不受跨域限制的特性，通过动态创建 <script> 标签，将回调函数名作为参数传递给服务器，服务器将数据包装在回调函数中返回。

总结:

• postMessage 是最推荐的跨域通信方式，功能强大，兼容性好，安全性高。
• window.name 适用于单向通信，从 iframe 向主框架传递数据。
• document.domain 仅限于同主域下的跨域通信。
• 代理服务器和 JSONP 是后端方案，分别适用于双向通信和数据获取。

选择哪种方法取决于具体的需求和场景。 为了安全起见，始终建议在使用 postMessage 时指定 targetOrigin，避免潜在的安全风险。