iframe 和子应用进行消息通讯、iframe 获取 H5 子应用中的方法

目录

1. iframe 和子应用进行消息通讯

1.1 iframe 页面 发送消息、监听消息

1.2 子应用 发送消息、监听消息

2. iframe 获取 H5 子应用中的方法

2.1 iframe 找不到 子应用 中方法的原因

2.2 iframe 获取 h5子应用 中方法的解决方案

3. 参考 github issue

---

1. iframe 和子应用进行消息通讯

1.1 iframe 页面 发送消息、监听消息

// iframe 页面发送消息
window.parent.postMessage({
  param: '121121',
  msg: 'success'
},'*');


// iframe 页面监听消息
window.addEventListener('message',function(event) {
  console.log('我是子页面监听的');
});

1.2 子应用 发送消息、监听消息

// 子应用 发送消息
document.getElementById('mapIframe').contentWindow.postMessage({
  module: 'yxtz',
  param: 'sl_btn_sw',
}, '*');


// 子应用 监听消息
window.addEventListener('message', (event) => {
  console.log('我是父页面监听的');
});

2. iframe 获取 H5 子应用中的方法

2.1 iframe 找不到 子应用 中方法的原因

子应用 集成到 基座应用 后，指向的 window 就是基座中的 window 了，不是子应用的

2.2 iframe 获取 h5子应用 中方法的解决方案

将 子应用 中的方法，注册到 window 上：

window.alertFun = function () {
	alert(1456);
};

iframe 通过 proxy 获取 子应用 中的方法

window.parent.proxy.alertFun()

3. 参考 github issue

https://github.com/umijs/qiankun/issues/966https://github.com/umijs/qiankun/issues/966