iframe 中的 onload 事件仅触发一次

Question

我的一个页面内有一个跨域的iframe，它的内容应该使用window.parent.postMessage方法来通知它被渲染到包含的页面（这样它就可以根据其内容调整iframe的高度）。它运行良好，但只有一次，如果我开始在 iframe 中单击并浏览不同的页面，即使 iframe 中的所有页面都包含相同的 JavaScript 代码，也不会再触发 load 事件（见下文）。

下面是容器的代码，比如容器.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 会足够早地移动它，在我的情况下它没有。

这是我如何解决它的方法：

1. 省略src并从iframe标记中onload：

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

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

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

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

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

4. 仍在父文档中，设置src：

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

轰隆隆，每次都着火。