postMessage实现iframe跨域通信

32次阅读

共计 911 个字符,预计需要花费 3 分钟才能阅读完成。

需求:项目可以单独运行,也可以以 iframe 的方式嵌入另一个系统运行。嵌入后两个系统需要通信。
window.postMessage 可以实现跨域通信,具体见 MDN 文档

父窗口

  • 假设域名为:https://www.main.com
  • 接收和发送消息
// html
<iframe id="iframe" src="https://www.sub.com" frameborder="0"></iframe>
// js
let iframe = document.getElementById('iframe')
window.addEventListener('message', (event) => {if (event.origin !== 'https://www.sub.com') return
    // 接收子窗口的消息
    let dataFromSub = event.data
    console.log(dataFromSub)
    // 给子窗口发送消息
    iframe.contentWindow.postMessage({data: 'data from main iframe'}, 'https://www.sub.com')
    // 也可以将 event.source 作为回信对象,将 event.origin 作为 targetOrigin
    /* event.source.postMessage({data: 'data from main iframe'}, event.origin) */
})

子窗口

  • 假设域名为:https://www.sub.com
  • sub 给 main 发消息
window.parent.postMessage({data: 'data from sub iframe'}, 'https://www.main.com')
  • sub 接收 main 的消息
window.addEventListener('message', (event) => {if (event.origin !== 'https://www.main.com') return
    // main 发过来的消息通过 event.data 接收
    let dataFromMain = event.data
    console.log(dataFromMain)
})
  • 判断是否是嵌入使用

正文完
 0