实现iframe与父窗口双向通信的秘诀：揭秘跨越框架的无缝交互

2024-01-03 05:25:13

iframe通信概述

iframe（inline frame）是一种HTML元素，允许您在网页中嵌入其他网页或应用程序。iframe是一个独立的窗口，具有自己的HTML、CSS和JavaScript代码，可以与父窗口进行交互。

iframe通信是实现跨框架数据交换的关键。跨框架通信是指在iframe子窗口和父窗口之间传递数据。这在构建复杂的前端应用时非常有用，例如微前端架构、单页应用中的组件通信等。

实现iframe通信的多种途径

1. window.parent和window.top

<iframe id="iframe1" src="iframe1.html"></iframe>

<script>
  // 从父窗口获取数据
  const dataFromParent = window.parent.getData();

  // 向父窗口发送数据
  window.parent.postMessage('Hello from iframe!', '*');
</script>

2. postMessage

<iframe id="iframe1" src="iframe1.html"></iframe>

<script>
  // 从父窗口获取数据
  window.addEventListener('message', (event) => {
    const dataFromParent = event.data;
  });

  // 向父窗口发送数据
  window.parent.postMessage('Hello from iframe!', '*');
</script>

3. 自定义事件

<iframe id="iframe1" src="iframe1.html"></iframe>

<script>
  // 从父窗口获取数据
  window.addEventListener('customEvent', (event) => {
    const dataFromParent = event.detail;
  });

  // 向父窗口发送数据
  const event = new CustomEvent('customEvent', { detail: 'Hello from iframe!' });
  window.parent.dispatchEvent(event);
</script>

克服跨域通信限制

跨域通信是指在不同域名或端口下的iframe之间进行通信。由于浏览器的同源策略，跨域通信受到限制。要克服跨域通信限制，可以使用以下方法：

1. JSONP

<script src="https://example.com/jsonp.js"></script>

// 定义回调函数
function callback(data) {
  // 处理从iframe接收到的数据
}

// 发送请求
const script = document.createElement('script');
script.src = `https://example.com/jsonp.js?callback=callback`;
document.head.appendChild(script);

2. CORS

<iframe src="https://example.com/iframe1.html" crossorigin="anonymous"></iframe>

// 从iframe获取数据
window.addEventListener('message', (event) => {
  const dataFromIframe = event.data;
});

// 向iframe发送数据
window.frames['iframe1'].postMessage('Hello from parent!', 'https://example.com');