Question

我试图让这个例子更简单，但实际上我的问题是在一个更复杂的环境中。我有一个包含iframe（child.htm）的html页面（parent.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>

所以当我点击“从顶部获取城市”链接时：

child.htm调用top.postMessage
parent.htm收到消息
parent.htm调用myIframe.postMessage发送响应
child.htm收到回复并将其存储在returnVal

我的问题是postMessage调用是异步的。所以在代码中：

var returnValue="";

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

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

当我返回returnValue时，returnValue尚未被收到的响应更改（上面的第3点和第4点）。

如果点击“从顶部获取城市”链接后点击“显示城市电话”链接，“伦敦”会按预期发出警告。

我的问题：我该如何处理？有没有办法在函数getCityFromTop（）中继续执行代码之前等待响应？

window.postMessage在代码执行之前等待响应

0 个答案: