开发React插件时Safari环境下iframe跨域postMessage报错及同域iframe通信优化问题咨询

你遇到的这个Safari报错，本质是因为遍历父窗口所有frames时，会尝试给跨域的iframe发送postMessage，而Safari对这种跨域消息的限制比Chrome/Firefox更严格，直接抛出了错误。下面给你几个可行的优化方案：

方案1：给同域iframe添加标识，精准定位目标 #

既然两个iframe都是你的插件生成的同域资源，你可以在创建iframe时给它们添加统一的标识（比如name或dataset属性），这样遍历父窗口frames时，只针对符合标识的iframe发送消息，完全避免给跨域iframe发消息的情况。

示例代码：

// 创建iframe时添加标识
const iframe1 = document.createElement('iframe');
iframe1.name = 'my-plugin-frame';
// 同理创建iframe2...

// 发送消息时过滤目标
const frames = window.parent.frames;
for (let i = 0; i < frames.length; i++) {
  const frame = frames[i];
  // 只给带有我们标识的同域iframe发消息
  if (frame.name === 'my-plugin-frame') {
    frame.postMessage(message, window.origin);
  }
}

这个方案从根源上避免了给跨域iframe发消息，自然不会触发Safari的报错。

方案2：用try-catch捕获跨域发送错误 #

如果暂时无法给iframe添加标识，你可以用try-catch包裹postMessage的调用，捕获Safari抛出的跨域错误，不让它显示在控制台：

const frames = window.parent.frames;
for (let i = 0; i < frames.length; i++) {
  try {
    frames[i].postMessage(message, window.origin);
  } catch (e) {
    // 忽略跨域发送的错误，仅做调试输出
    console.debug('跳过跨域iframe的消息发送', e);
  }
}

这种方式比较简单直接，虽然还是会尝试给跨域iframe发消息，但错误被捕获后不会出现在控制台的报错列表里。

方案3：利用同域特性用localStorage通信（无需postMessage到父窗口） #

因为两个iframe是同域的，它们可以直接共享localStorage，你可以通过监听storage事件来实现通信，完全绕开父窗口的frames遍历：

在接收消息的iframe中监听：

window.addEventListener('storage', (e) => {
  if (e.key === 'my-plugin-message') {
    const message = JSON.parse(e.newValue);
    // 处理收到的消息
    console.log('收到消息:', message);
  }
});

在发送消息的iframe中触发：

// 发送消息时写入localStorage
localStorage.setItem('my-plugin-message', JSON.stringify(message));
// 立即清除，避免重复触发监听事件
setTimeout(() => localStorage.removeItem('my-plugin-message'), 0);

这个方案不需要依赖父窗口，也不会有任何跨域相关的报错，适合同域iframe之间的通信场景。

额外提示：优化跨域postMessage的目标origin #

你当前的跨域通信代码用了(new URL(document.referrer)).origin，这个在某些场景下可能会有问题（比如用户直接打开页面导致referrer为空），建议可以提前把父窗口的origin作为参数传入iframe，或者在确保安全的前提下明确指定目标origin，尽量避免用*。

内容的提问来源于stack exchange，提问作者artooras