Question

我正在尝试实现一些iframe通信。我在http://parent.com：

上托管了该页面

<html>
   <iframe id="iframe1" src="http://child.com"/>
   <iframe id="iframe2" src="http://child.com"/>
   <iframe id="iframe3" src="http://child.com"/>
</html>

我试图使用postMessage在iframe1和iframe2之间进行通信，但我似乎无法找到。

以下是我在子iframe中的代码：

var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

eventer(messageEvent, function(event) {
   event.source.postMessage("somerandomdata", "http://child.com)
}, false);

提前致谢！

Answer 1

您是否考虑过使用cross-document messaging。

父窗口：

class Base {
    Object getValue() {
        return null;
    }
}
class Sub extends Base {
    @Override String getValue() {
        return "now a string";
    }
}

儿童iframe：

 myIframe.contentWindow.postMessage('hello', '*');

Answer 2

最后弄明白了。您需要在所有iframe上都有一个名称：

<html>
   <iframe id="iframe1" name="iframe1" src="http://child.com"/>
   <iframe id="iframe2" name="iframe2" src="http://child.com"/>
   <iframe id="iframe3" name="iframe3"src="http://child.com"/>
</html>

然后从子框架中可以执行此操作：

window.parent.frames["iframe1"]

Answer 3

您可以通过以下方式向父母发送消息

// Send a message to the parent
var sendMessage = function (msg) {
    // Make sure you are sending a string, and stringified JSON
    window.parent.postMessage(msg, '*');
};

您可以找到一个非常有用的示例代码here

iframe子到父与多个iframe通信

3 个答案: