Question

我有以下链接加载到名为iframe的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>

然后，我具有以下jQuery onclick函数将链接中的链接加载到iframe中。

<script>
$(document).ready(function(){
    $("a").click(function(e) {
        e.preventDefault();
        $("#contentFrame").attr("src", $(this).attr("href"));
    })
});
<script>

但是，加载链接时，我需要以以下格式添加postMessage。

{action:'navigate', route: { path: 'url/path'}}

谁能告诉我如何将该postMessage合并到现有代码中？

谢谢

Answer 1

可以使用iframe加载事件并在其中获取iframe窗口上下文并发布到该窗口

$('a').click(function() {
    $('#contentFrame').on('load', function() {
      this.contentWindow.postMessage({
        action: 'navigate',
        route: {
          path: 'url/path'
        }
      })
    });
  });

DEMO

iframe上的jQuery和postMessage

1 个答案: