问题

将百度的地图按需求简单封装一下,通过 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);
});