Question

我的某个页面中有一个跨域 iframe，其内容应该使用window.parent.postMessage方法通知它呈现给包含的页面（因此它可以调整iframe＆＃ 39;高度与其内容相同）。它工作得很好，但只有一次，如果我开始点击iframe并浏览不同的页面，即使iframe中的所有页面都包含相同的JavaScript代码，也不会再触发load事件（见下文）。

这里的容器代码让我们说 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

我遇到了完全相同的问题。 @ n00dl3的解决方案可能无法在所有情况下都适用-不适用于我。这是由于竞争条件-load处理程序需要在iframe加载其src之前附加。在某些情况下，将JS内联移动会足够早地移动它，而在我看来，不会。

这是我解决的方法：

从src标记中省略onload和iframe：

<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");

景气，每次都会触发。

Answer 2

好的，我终于找到了解决方案（虽然欢迎解释）。

我必须将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 3

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

iframe中的onload事件只触发一次

3 个答案: