javascript - iframe 内的 onload 事件仅触发一次

Question

我的一个页面中有一个跨域 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>