关于iframe通过postMessage获取不到参数的问题
问题
将百度的地图按需求简单封装一下,通过 iframe 嵌入到其他网页中,根据 postMessage 传入的参数进行一定程度的交互。但是父页面传入的参数子 iframe 获取不到参数
问题所在
用了一下 chatGPT 查询一下也一无所获,都没用。通过不断排查后发现 在 iframe 中的网页还没有完全渲染完成在父页面中就触发了 iframe 的 onload 函数,iframe 中的监听接收函数还没有创建时父页面就直接发送了消息导致接收不到。
解决办法
子页面的地图还未完全渲染完成时父页面就发送了消息,就在子页面添加一个 postMessage 函数,子 iframe 渲染完成后发送消息给父页面,父页面再向子页面通信。
父页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body style="width:100vw;height:100vh;">
<iframe id="child" style="width:100%;height:100%;" src="子页面网址"></iframe>
</body>
</html>
<script>
let dom = document.getElementById('child')
dom.onload = function () {
window.addEventListener("message", handleLoad, false)
}
function handleLoad(val) {
if (val.data === 'loaded') {
// iframe渲染完成后发送初始化参数
// ...params
}
}
// 测试-延迟8s,模拟等待iframe渲染完成后发送消息触发联动
setTimeout(() => {
dom.contentWindow.postMessage({
"*")
}, 8000)
// 测试-延迟15s,模拟等待iframe渲染完成后发送消息触发联动
setTimeout(() => {
dom.contentWindow.postMessage({
// ...params
},
"*")
}, 15000)
</script>
子页面
window.addEventListener("message", handleMessage, false);
window.parent.postMessage("loaded", "*"); // 在iframe的监听函数开始监听后发送 加载完成 消息给父页面接收
onUnmounted(() => {
window.removeEventListener("message", handleMessage);
});
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步