window.addEventListener("message", (e) => {
var data = e.data;
console.log("RECEIVED message from CHILD TO PARENT", data);
var type = data.type;
var body = data.body;
if(type === "button-click" && body) {
console.log("button-click RECEIVED FROM CHILD")
//Additional functionality ...
} else if (type === "text-msg" && body) {
console.log("TEXT MESSAGE RECEIVED FROM CHILD");
//Additional functionality ...
}
});
7条答案
按热度按时间dy1byipe1#
使用
event.source.window.postMessage
发送回发件人。来自Iframe
然后从家长那里说回来。
eiee3dmh2#
window.top
属性应该能够给予您所需要的内容。例如
参见http://cross-browser.com/talk/inter-frame_comm.html
tcbh2hod3#
您也可以使用
postMessage(message, '*')
;eiee3dmh4#
在花了2天的时间试图让一个iFrame将消息发布回父应用程序(在我的情况下是一个Vue应用程序)之后,我遇到了这个极好的参考:
https://dev-bay.com/iframe-and-parent-window-postmessage-communication/
从iframe到父级:
在父级中,我的Vue应用程序装载了生命周期事件,但请参考链接以满足您自己的需求:
有关父代与iFrame之间的通信示例,请参见参考文件。
希望这对其他人有帮助。
7ajki6be5#
对于不同的域,不可能直接调用方法或访问iframe的内容文档。
您必须使用cross-document messaging。
父级-〉iframe
例如,在顶部窗口中:
在iframe中:
iframe -〉父级
例如,在顶部窗口中:
在iframe中:
nr9pn0ug6#
在2018年和现代浏览器中,您可以从iframe向父窗口发送自定义事件。
iframe:
父母:
PS:当然,你也可以用同样的方式向相反的方向发送事件。
a1o7rhls7#
此库支持HTML5 postMessage和带有resize+hash https://github.com/ternarylabs/porthole的传统浏览器
编辑:现在在2014年,IE6/7的使用率相当低,IE8和最重要的是支持
postMessage
,所以我现在建议只使用它。https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage