iframe 内的 onload 事件仅触发一次

Posted 2023-05-09

【中文标题】iframe 内的 onload 事件仅触发一次

【英文标题】：onload event inside iframe only triggers once

【发布时间】：2015-03-13 18:56:50

【问题描述】：

我的一个页面中有一个跨域 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, '*');
);

【参考方案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>

【讨论】：

也许使用 $(document).ready() 代替？ ***.com/questions/3698200/…

不，如果我正在监听加载事件，那是因为页面需要加载...不过感谢您抽出宝贵时间回答...

@n00dl3 我知道发生了什么。如果 iframe 在父级执行 /assets/js/build.js 之前完成其 src 的加载，则处理程序将不会在 load 事件之前附加，因此不会触发。移动脚本内联必须使其更早执行。

@Wiscocrew 如果脚本在父窗口内，但它在 iframe 内，这将是相关的。

【参考方案2】：

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

【参考方案3】：

我遇到了完全相同的问题。 @n00dl3 的解决方案可能不适用于所有情况——它不适用于我。这是由于竞争条件 - 需要在 iframe 加载其 src 之前附加 load 处理程序。在某些情况下，移动 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");

轰隆隆，每次都开火。