1

我正在使用发布消息来动态调整 iframe 的高度。保存 iframe 的 html 添加了一个侦听器，该侦听器将触发帧调整大小。父级上的（简化的）相关代码如下所示：

<div id="dynamic_content">
    <iframe  src="http://my.content"></iframe>-->
</div>

<script>
    window.onload = function () {
        window.addEventListener("message", handleEventTrigger, false);
    };

    function handleEventTrigger(evt) {
        var height = evt.data;
        alert("Received: " + evt.data);
        if (isNumber(height)) {
            $("#dynamic_content").height(height + "px");
        }
    }

    function isNumber(str) {
        return !isNaN(str - 0);
    }    
</script>

在 iframe 的源上，我在加载时触发 postMessage。基本上我有一个id为outerDiv的div，我想发送它的高度。相关的javascript代码是：

window.onload = function () {
    var height = $("#outerDiv")[0].offsetHeight;
    if (isNumber(height)) {
        parent.postMessage(height, "*");   
    }        
};

我现在的问题是这只偶尔有效。我假设在添加事件侦听器和触发发布消息之间存在竞争条件。我依赖于在发布消息被触发之前绑定事件侦听器。确保这一点的适当方法是什么？两者都必然window.onload。这些地址是否相同window，这是一个/问题吗？

4

2 回答 2

1

据我了解，代码是按打印顺序执行的，所以我通过确保将addEventListener其放在<iframe>代码中的之前解决了这个问题 - 并且也停止执行此加载：

<script>
    window.addEventListener("message", handleEventTrigger, false);        
    function handleEventTrigger(evt) { ... }
</script>

<iframe  src="http://my.content"></iframe>-->

这解决了问题，我的比赛条件消失了。但是，据我了解，建议是将 js 代码放在 html 的末尾。如果有一个很好的解决方案我也可以实现这一点，请大声喊叫..

于 2011-11-09T07:50:45.763 回答
0

这只是一个猜测，但是当您不发布高度而是一个回调函数名称时，可以避免竞争条件或异步时间，以便侦听器必须调用该函数来获取 iframe 的当前高度。

于 2011-11-08T09:30:23.190 回答