iframe 和父頁面通信的方法

通過 window.name

在父頁面中：

// in parent
iframe.contentWindow.name = 'hello world'

在 iframe 中：

// in iframe
console.log(window.name)

通過 window.postMessage

在父頁面中：

// in parent
const list = ['hello', 'world']
iframe.contentWindow.postMessage(list, 'http://127.0.0.1:9002') // 參數 2 爲 iframe.src

在　iframe 中：

// in iframe
window.addEventListener('message', e => {
    console.log(e.data)
})

上面爲父頁面向　iframe 傳遞消息的方法。

iframe 向父頁面傳遞消息亦然：

在　iframe 中：

// in iframe
const msg = 'message from iframe'
window.parent.postMessage(msg, '*')

在父頁面中：

// in parent
window.addEventListener('message', e => {
    console.log(e.data)
})

資源地圖

• Two way iframe communication