Состояние гонки с addEventListener.Когда связывать? - PullRequest
Новая
       9

Состояние гонки с addEventListener.Когда связывать?

1 голос
/ 08 ноября 2011

Я использую сообщение для динамической регулировки высоты iframe. HTML-код, содержащий iframe, добавляет прослушиватель, который запускает изменение размера кадра. (Упрощенный) соответствующий код родительского элемента выглядит примерно так: 

<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 при загрузке. В основном у меня есть div с id externalDiv, который я хочу отправить высоту. Соответствующий код JavaScript: 

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

Моя проблема сейчас в том, что это работает только изредка. Я предполагаю, что между добавлением прослушивателя события и отправкой сообщения есть гонка. Я полагаюсь на то, что связал прослушиватель событий до того, как сообщение будет запущено. Как правильно это обеспечить? Оба связаны с window.onload. Они относятся к одному и тому же window, и это проблема?

Ответы [ 2 ]

1 голос
/ 09 ноября 2011

Насколько я понимаю, код выполняется в том порядке, в котором он напечатан, поэтому я решил это, убедившись, что addEventListener помещен перед <iframe> в коде, - а также прекратил выполнять эту загрузку: 

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

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

Это решает проблему, и мое состояние гонки исчезло.Однако из того, что я понял, рекомендуется размещать js-код в конце html.Если есть хорошее решение, где я тоже могу этого достичь, пожалуйста, кричите.

0 голосов
/ 08 ноября 2011

Это всего лишь предположение, но можно избежать условия гонки или асинхронного времени, когда вы публикуете не высоту, а имя функции обратного вызова, так что слушатель должен вызвать эту функцию, чтобы получить текущую высоту iframe.

...