触发从 iframe 到父文档的自定义事件答案

【问题标题】：Trigger Custom Event From Iframe To Parent Document触发从 iframe 到父文档的自定义事件
【发布时间】：2012-10-09 16:14:09
【问题描述】：

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

有什么建议吗？

【问题讨论】：

请写清楚the same source是什么。
你可以从你的 iframe 调用 parent.functionname()。
同一个协议，同一个主机，同一个端口
如果父窗口在不同的域中，则无法从子 iframe 引发父窗口上的事件。

标签： javascript jquery iframe

【解决方案1】：

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

目前，API 仅支持传递字符串，但如果您修改您的解决方案，它会很强大。更多详情here

来自源页面（被 iframe 使用）：
postMessage API 需要 2 个参数 - 消息，目标

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

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

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

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

使用 event.origin 检查定义您的函数（出于安全考虑）\

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

【讨论】：

我在每个 IE 和 Edge 中传递对象时遇到了麻烦
@FarzadYZ - 您的评论似乎与 what MDN says 相矛盾：“window.postMessage() 方法可以安全地启用跨域通信。”
JSON.stringify(yourObject) 通过 postMessage 发送
我需要做同样的事情，但内部框架的域与父文档不同。我怎样才能做到这一点？

【解决方案2】：

这行得通：

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

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

【讨论】：

如果父页面不包含jQuery怎么办？
您可以使用window.addEventListener，如下所示。

【解决方案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'}
}

【讨论】：

我可以检查这对跨域 iframe 是如何工作的吗？ window.parent.document 抛出 CORS 错误（在跨域 iframe 的情况下）。
它对我不起作用。我处于 Angular 6 环境中。也许有什么东西阻碍了这种交流，不确定。

【解决方案4】：

我也找到了用 jquery 解决这个问题的方法：

在父文件中：

<body>
        <iframe src="something.html"></iframe>

</body>

<script>
 window.document.addEventListener('event', function(e){
            console.log("event:" + e.detail);
            $("iframe").contents().find(".class[title='" + e.detail + "']").css(someChanges);
</script>

所以您不需要在您的 iFrame 中添加任何其他 EventListener 。

当然，也许你想看看我的 CustomEvent：

var test  = "1";
var event = new CustomEvent('event', { detail: test })
                window.document.dispatchEvent(event);

我希望我能帮助别人......

【讨论】：