iframe 中的 onload 事件只触发一次

Question

我的一个页面中有一个 cross-domain iframe，它的内容应该使用 window.parent.postMessage 方法来通知它被呈现到包含页面（所以它可以根据内容调整 iframe 的高度）。它工作得很好，但只有一次，如果我开始点击 iframe 并浏览不同的页面，即使 iframe 中的所有页面都包含相同的 JavaScript 代码，加载事件也不会再被触发（见下文） .

这里是容器的代码 container.js:

function onMessage(jqEvent) {
    if (jqEvent.originalEvent.data.iframe) {
        var iframeContentHeight = jqEvent.originalEvent.data.iframe;
        $('iframe').height(iframeContentHeight + 300);
    }
}
$(window).on('message.socialPanel', onMessage);

这是 iframe 中的代码（它在外部文件中，我们称之为 iframe.js）：

$(window).on('load', function () {
   var height = $('html').height();
   window.parent.postMessage({'iframe': height}, '*');
});

Answer 1

好的，我终于找到了解决方案（不过欢迎提供解释）。

我不得不将 iframe 的 javascript 放入内联 <script> 标记中，而不是放在外部标记中。

所以我之前的代码：

<script type="text/javascript" src="/assets/js/build.js" ></script>

变成了：

<script type="text/javascript">
            window.onload = function () {
                var height = $('html').height();
                window.parent.postMessage({'iframe': height}, '*');
            }
</script>

Answer 2

另一个建议 - onload 仅被触发一次，是的，即使您更改 src URL。但是，如果您希望它再次被触发 - 只需将 iframe 从 DOM 中分离出来，然后再将其附加回去（当更改 URL 时）。它对我有用。

Answer 3

我运行陷入完全相同的问题。 @n00dl3 的解决方案可能并非在所有情况下都有效——它不适合我。这是由于竞争条件 - load 处理程序需要在 iframe 加载其 src 之前附加。在某些情况下，移动 JS 内联会足够早地移动它，在我的情况下它没有。

我是这样解决的：

省略 iframe 标签中的 src 和 onload：

<iframe id="foo"></iframe>

定义（在父文档中）我想要运行加载的函数：

function resize() {
  // do the resizing here
}

再次在父文档中附加 load 处理程序：

document.getElementById("foo").setAttribute("onload", "resize()");

还是在父文档中，设置src:

document.getElementById("foo").setAttribute("src", "https://example.com/bar");

砰，每次都开火。

iframe 中的 onload 事件只触发一次

onload event inside iframe only triggers once

html

javascript

iframe

jquery

cross-domain