Question

我正在使用帖子消息来动态调整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为externalDiv的div，我想发送它的高度。相关的JavaScript代码是：

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

我现在的问题是，这只会偶尔使用。我假设在添加事件侦听器和触发帖子消息之间存在竞争条件。我依赖于在发布post消息之前绑定事件监听器。确保这一点的适当方法是什么？两者都绑定到window.onload。这些是window相同的问题吗？这是一个问题吗？

Answer 1

根据我的理解，代码按照打印的顺序执行，所以我通过确保addEventListener放在代码中的<iframe>之前解决了这个问题 - 并且还停止执行此操作：

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

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

这解决了问题，我的竞争状态消失了。但是，根据我的理解，建议将js-code放在html的末尾。如果有一个很好的解决方案，我也可以实现这一点，请大声喊出来。

Answer 2

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

使用addEventListener进行竞争条件。何时绑定？

2 个答案: