46

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

有什么建议吗？

4

4 回答 4

44

我遇到了类似的问题并习惯于window.postMessage解决。

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

从源页面（被 iframe 使用）：
postMessage API 需要 2 个参数 - message ， target

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

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

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

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

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

     function handleMessage(event) {  
     if (event.origin != "http://child.com") { return; }  
     switch(event.data) {   
          case "HELLO_PARENT":  
             alert("Hello Child");  
             break;  
     } 
 }
于 2013-04-03T04:18:33.057 回答
40

这有效：

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

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

于 2012-10-19T05:29:11.977 回答
33

支持同域和跨域 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'}
}
于 2016-12-28T12:04:30.053 回答
2

我也找到了用 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>

所以你不需要在你的 iFrames添加任何其他EventListener 。

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

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

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

于 2019-04-25T17:06:16.933 回答