Блог

Главная - Вопросы по программированию - window.postMessage ожидает ответа перед выполнением кода

window.postMessage ожидает ответа перед выполнением кода

#javascript #asynchronous #synchronous #postmessage

#javascript #асинхронный #синхронный #postmessage

Вопрос:

Я пытаюсь сделать пример более простым, на самом деле моя проблема находится в более сложном контексте. У меня есть HTML-страница (parent.htm ) содержащий iframe (child.htm ). HTML-страница и iframe находятся в разных доменах, поэтому я использую window.postMessage для обмена данными между одним и другим.

Вот код parent.htm : 

 <html>
    <head>
        <script>
            if (window.addEventListener){
                window.addEventListener("message",getMessage,false);
            } else if (window.XMLHttpRequest){
                window.attachEvent("onmessage",getMessage);
            }

            function getMessage(event){
                if(event.data=="getCity"){
                    window.myIframe.postMessage("London","*");
                }
            }

        </script>
    </head>
    <body>
        <div style="height:100%;width:100%">
            <iframe name="myIframe" src="child.htm"></iframe>
        </div>      
  </body>
</html>

И код child.htm

 <html>
    <head>
        <script>
            if (window.addEventListener){
                window.addEventListener("message",getValue,false);
            } else if (window.XMLHttpRequest){
                window.attachEvent("onmessage",getValue);
            }

            var returnValue="";

            function getValue(event){
                returnValue=event.data;
            }

            function getCityFromTop(){
                top.postMessage("getCity","*"); 
                return returnValue;
            }
        </script>
    </head>     
    <body>
        <a href="javascript:alert(getCityFromTop())">Get city from top</a>
        <br/>
        <a href="javascript:alert(returnValue)">Show city after call</a>
    </body>
</html>

Итак, когда я нажимаю на ссылку «Получить город сверху» :

  1. child.htm вызывает top.postMessage
  2. parent.htm получает сообщение
  3. parent.htm вызывает myIframe.postMessage для отправки ответа
  4. дочерний элемент.htm получает ответ и сохраняет его в returnVal

Моя проблема в том, что вызов postMessage является асинхронным. Итак, в коде :

 var returnValue="";

function getValue(event){
    returnValue=event.data;
}

function getCityFromTop(){
    top.postMessage("getCity","*"); 
    return returnValue;
}

Когда я возвращаю значение returnValue , значение returnValue еще не изменено полученным ответом (пункты 3 и 4 выше).

Если я нажму на «Показать город после вызова» после нажатия на ссылку «Получить город сверху», «Лондон» будет предупрежден, как и ожидалось.

Мой вопрос: как я могу с этим справиться? Есть ли способ дождаться ответа, прежде чем продолжить выполнение кода в функции getCityFromTop()?

Комментарии:

1. Нет. postMessage является однонаправленным. Вам пришлось бы подождать, пока придет другое сообщение.

2. И есть ли обходной путь для «приостановки» до тех пор, пока возвращаемое значение не будет отличаться от «»?

3. если больше нечего выполнять, по определению рабочий процесс будет «приостановлен». затем, когда сообщение вернется, вы можете запустить его снова.

4. Извините, но я не уверен, что понял ваш ответ. Если у вас есть время, можете ли вы привести краткий пример в контексте моего кода? большое спасибо.