postMessage实现iframe跨域通讯

需求：项目能够单独运行，也能够以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)
})

• 判断是不是嵌入使用

window.parent !== window // 做为Iframe嵌入时值为true

• 效果