iframe---通信

主应用和子应用同源下

通过各自 顶级对象的.xxx 去获取和调用属性

• 主应用通过document.getElementById('iframeId').contentWindow 获取子应用`的顶级对象

// 主应用
<iframe name="iframeName" id="iframeId" src="./child.html"></iframe>

<script>
// 等待子应用加载完毕后 获取子应用的顶级对象
 const childWindow = document.getElementById('iframeId').contentWindow
// xxx是子应用暴露的全局方法或属性
childWindow.xxx
// 当然也可以通过以下方式获取子应用的元素等
childWindow.document.getElementById("childInp")
</script>

• 子应用通过parent.window获取主应用的顶级对象

 // 子应用中获取主应用的顶级对象
 const parentWindow = parent.window;
 // xxx是主应用暴露的全局方法或属性
 parentWindow.xxx
 // 当然也可以通过以下方式获取主应用的元素等
 parentWindow.document.getElementById("parentInp")

主应用和子应用跨域下

通过各自 顶级对象的.postMessage 去向对方传递数据 和 window.addEventListener("message", (event)=>{})获取

• 主应用通过postMessage发送数据给子应用

// 发送数据给子应用
function sendDataToChild() {
   console.log('sendDataToChild---start');
   const childWindow = document.getElementById("iframeId").contentWindow
   childWindow.postMessage({name: "bwf", age: 18}, "*")
}

// 监听来自子应用的数据
window.addEventListener("message", (e) => {
   const { data } = e
   console.log('parent.html---message', data);
})

• 子应用通过监听message事件获取主应用的传递数据

// 监听来自父应用的数据
window.addEventListener("message", (e) => {
    const { data } = e
    console.log('child.html---message', data);
})

// 发送数据给主应用
function sendDataToParent() {
    console.log('sendDataToParent---start');
    const parentWindow = parent.window
    parentWindow.postMessage({name: "childData", age: 99}, "*")
}

注意点： 获取子应用的时候，一定要确保子应用加载完onload毕再进行其他操作。

const iframe = document.getElementById("iframeId")
iframe.onload = () => {
    const childWindow = iframe.contentWindow
    childWindow.postMessage({name: "wmy", age: 28}, "*")
}