Question

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

有什么建议吗？

Answer 1

这有效：

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

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

Answer 2

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

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

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

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

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

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

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

使用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'}
}

Answer 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);

我希望我可以帮助某人...

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

4 个答案: