Nuxt2项目iframe调用postMessage报origin不匹配问题排查

现有逻辑存在3个关键问题，导致postMessage源不匹配报错：

• 你的waitForGlobalElement仅检测iframe DOM节点是否被插入文档，完全没有校验iframe内部页面是否加载完成。iframe被append到页面的初始阶段，内部是about:blank页，源和当前页面一致（即http://127.0.0.1:8001），此时直接向目标源https://icicle.ext发postMessage必然触发源不匹配错误。
• createIcicleIframeBridge内部硬编码了3秒延迟才插入iframe，和purge逻辑之间没有状态同步，完全靠时间差碰运气。
• 没有做iframe单例控制，重复调用创建函数会插入多个冗余iframe，也可能导致消息发向未就绪的实例。

核心思路是：移除固定延迟，在iframe加载完成（load事件触发）后再标记bridge为就绪状态，就绪前的消息存入队列等待发送，从根源上避免向未加载完成的iframe发消息。
修改后的插件代码如下：

/*
** Post Icicle bridge data
*/
// 桥接状态管理
let bridgeIframe = null
let isBridgeReady = false
const pendingMessageQueue = []

function postIcicleBridgeData (data, targetOrigin = 'https://icicle.ext') {
  // 已就绪直接发，未就绪进队列
  if (isBridgeReady && bridgeIframe?.contentWindow) {
    bridgeIframe.contentWindow.postMessage(data, targetOrigin)
  } else {
    pendingMessageQueue.push({ data, targetOrigin })
  }
}

export default function ({ app }, inject) {
  /*
  ** Create a bridge to Icicle for cross-domain
  */
  inject('createIcicleIframeBridge', (url = 'https://icicle.ext') => {
    // 单例判断，避免重复创建
    if (bridgeIframe) return

    const iframeBridge = document.createElement('iframe')
    iframeBridge.src = `${url}?v=${Math.round(new Date().getTime() / 1000)}`
    iframeBridge.dataset.icicleHashBridge = true
    iframeBridge.style.display = 'none'

    // 监听iframe加载完成，标记就绪后发送所有队列消息
    iframeBridge.addEventListener('load', () => {
      isBridgeReady = true
      bridgeIframe = iframeBridge
      // 清空待发送队列
      while (pendingMessageQueue.length) {
        const { data, targetOrigin } = pendingMessageQueue.shift()
        iframeBridge.contentWindow.postMessage(data, targetOrigin)
      }
    })

    document.body.appendChild(iframeBridge)
  })

  /*
  ** Clear global hash
  */
  inject('purgeIcicleHashBetweenDomains', () => {
    postIcicleBridgeData('purgeHash')
  })

  // 原有waitForGlobalElement如果其他地方要用可以保留，桥接逻辑不再依赖它
  inject('waitForGlobalElement', (key, callback, delay = 10) => {
    if (document.querySelector(key)) {
      callback()
    } else {
      setTimeout(() => {
        app.$waitForGlobalElement(key, callback, delay)
      }, delay)
    }
  })
}

页面调用逻辑不需要修改，原有mounted里的写法可以正常运行：

mounted () {
  this.$createIcicleIframeBridge()
  // clear Icicle hash in case customer doesn't apply
  this.$purgeIcicleHashBetweenDomains()
}

• 该实现完全移除了固定时长的setTimeout，靠iframe原生load事件判断就绪状态，不存在时序上的可靠性问题。
• 就算purge函数在iframe创建前、创建中调用，消息会先存在队列里，等iframe加载完成自动发送，不会丢失也不会提前触发postMessage。
• 单例判断避免了重复插入iframe导致的资源浪费和逻辑冲突。

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