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

Question

我在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'}
}