如何在jQuery iframe加载逻辑中集成指定格式的postMessage？

你现在已经有了通过jQuery控制链接加载到contentFrame的逻辑，要在加载时发送指定格式的postMessage其实很简单，只需要在现有代码里补充发送消息的逻辑即可。

修改后的完整代码 #

<!-- 你的链接与iframe结构保持不变 -->
<a href="/url/to/link1" target="contentFrame">LINK 1</a> | <a href="/url/to/link2" target="contentFrame">LINK 2</a>
<iframe src="url/path" name="contentFrame" id="contentFrame" scrolling="no"></iframe>

<script>
$(document).ready(function(){
  $("a").click(function(e) {
    e.preventDefault();
    // 先把目标链接存起来，方便后续复用
    const targetPath = $(this).attr("href");
    // 更新iframe的src属性，加载新内容
    $("#contentFrame").attr("src", targetPath);
    // 向iframe内部发送指定格式的postMessage
    $("#contentFrame")[0].contentWindow.postMessage(
      {action:'navigate', route: { path: targetPath }},
      '*' // 注意：为了安全，建议替换为iframe内容的具体域名，比如'https://your-target-domain.com'
    );
  })
});
</script>

关键细节说明 #

• 我们先把点击的链接地址存入targetPath变量，避免重复获取，让代码更简洁
• 发送postMessage时，必须通过iframe的contentWindow对象来触发，这是消息的目标接收窗口
• 第二个参数'*'是允许接收消息的域名，强烈建议替换成iframe实际加载内容的具体域名，这样能避免消息被无关页面接收，提升安全性
• 如果需要确保iframe内容完全加载后再发送消息，可以监听iframe的load事件，把postMessage放在回调里：

$("#contentFrame").on('load', function() {
  this.contentWindow.postMessage(
    {action:'navigate', route: { path: targetPath }},
    'https://your-target-domain.com'
  );
});

不过如果只是需要发送导航触发的通知，直接在设置src后发送通常就足够了。

内容的提问来源于stack exchange，提问作者Ahmed