与 addEventListener 的竞争条件。什么时候绑定？

Question

我正在使用 post 消息动态调整 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。这些是否针对同一个窗口，这是问题所在吗？

Answer 1

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

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

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

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

Answer 2

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