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

• 效果