js postMessage不工作

JavaScript高级程序设计 第四版 20章第二节内容。 20.2 跨上下文消息 内容学习笔记

故障现场

当前页面为 index2.html,本地页面运行地址为 http://localhost:52330/Chapter20/index2.html, 代码如下

页面中使用 iframe 标签显示 index.html 页面，效果如下

index.html 内容

  
    
  
  
    index.html
    
  

当前代码写法在 index2.html 中使用 postMessage 页面运行后，在 index.html 中监听 message 无反应。

原因分析

• 可能代码写法哪里有误
• 可能由于 index2.html 代码块执行太快，iframe 中内容还未完全加载和渲染就结束了

解决方案

• 写法问题，通过核对书和MDN没有不一样的地方
• 尝试使用 setTimeout 后发现这个问题解决了,确定了是渲染加载的问题

index2.html 代码调整部分如下

setTimeout(() => {
  console.log('1000ms')
  iframeWindow.postMessage('A secret', 'http://localhost:52330/Chapter20/index.html');
}, 1000)