从Iframe到父文档触发自定义事件

我在iframe中触发自定义事件并从父文档中检测到它时遇到了一些麻烦。 iframe和父文档都具有相同的源（相同的协议，相同的主机，相同的端口）。

有什么建议吗？

Answer 1

这有效：

 parent.$('body').trigger('eventName'); 

将在父文档中检测到iframe内部触发的事件。

Answer 2

我遇到了类似的问题并使用window.postMessage来解决。

目前，API仅支持传递字符串，但如果您修改解决方案，它可能会很强大。 更多细节在这里

从源页面（由iframe使用）：
postMessage API需要2个参数 – 消息，目标

例如： window.parent.postMessage("HELLO_PARENT", 'http://parent.com');

从父页面（包含iframe。例如Container）：

1. 像往常一样添加事件监听器

    window.addEventListener('message', handleMessage, false); 

2. 使用event.origin检查定义您的函数（为安全起见）\

    function handleMessage(event) { if (event.origin != "h ttp://child.com") { return; } switch(event.data) { case "HELLO_PARENT": alert("Hello Child"); break; } } 

Answer 3

支持同域和跨域iframe的一致答案是使用事件系统。

目标是从iframe向父级发送自定义事件。

在iframe源文件中：

 var myCustomData = { foo: 'bar' } var event = new CustomEvent('myEvent', { detail: myCustomData }) window.parent.document.dispatchEvent(event) 

并将其添加到包含iframe的父文件中：

 window.document.addEventListener('myEvent', handleEvent, false) function handleEvent(e) { console.log(e.detail) // outputs: {foo: 'bar'} }