iframe通信

iframe通信的两种情况

1、不跨域

// 父页面
<iframe src:"" name:"iframeName"></iframe>


// 父→子
// 父页面 发送
sendMessage() {
    iframeName.window.getMessage('')
}
// 子页面 接收
getMessage(e) {
    console.log(e)
}


// 子→父
// 子页面 发送
parent.window.getMessage('')
// 父页面 接收
getMessage(e) {
    console.log(e)
}

2、跨域

// 父→子

// 父页面 发送
iframe.contentWindow.postMessage({ type: '', data: "" }, '*')
// 子页面 接收
window.addEventListener('message', (e) => {
    console.log(e)
})


// 子→父
// 子页面 发送
window.parent.postMessage({ type: 'check', data: ""}, '*')
// 父页面 接收
window.addEventListener('message', (e) => {
    console.log(e)
})