确定当前/自己的 iframe答案

【问题标题】：Determine current / own iframe确定当前/自己的 iframe
【发布时间】：2011-06-09 04:02:50
【问题描述】：

确定页面正在显示的iframe DOM 元素的最佳方法是什么？

当 iframe 的内容真正完成加载时，我需要通知父窗口（iframe onload 看起来像是 WebKit 的骗局）。

考虑以下场景：

父窗口加载一个新的 iframe
加载的 iframe 从父窗口调用一个函数，并发送对其 iframe DOM 元素的引用（类似于“sender”参数）。
父级调用的函数会破坏 iframe。

也欢迎就这种帧间通信的替代解决方案提出建议。

我遇到的一个问题是 Safari / Chrome / WebKit 浏览器显然过早触发 iframe 的 onload 事件 - 我尝试将表单数据（带有文件上传）发送到 iframe 并让 onload 处理程序清除 @987654325 @ 元素的值并销毁 iframe，导致表单提交中止，所以在这种情况下我不能使用onload（顺便说一句，这是一个功能还是一个错误？）。

另一个用例是 iframe 做某事并希望与父级交互。

【问题讨论】：

你在说什么加载处理程序？您在 iframe 中加载的 iframe 或文档？
iframe 的 onload 处理程序。
如果可以，请尝试在文档正文标签中设置 onload 功能并从那里调用父级，这应该可以工作。我记得以前在 iframe 上看到过 iffy webkit onlaod，还记得我围绕它构建的解决方案，但它是一年前的，我现在在我们的存储库中找不到源代码 - 如果你真的需要它，我可以找一下:)
谢谢马丁，我真的不需要它，但我很想知道你想出的解决方法，所以如果有一天你找到它，请告诉我 - 不需要不过快点。

标签： javascript dom iframe dom-events onload

【解决方案1】：

有几种方法可以在框架和它的父级之间进行通信。

最简单的是如果两者都设置了相同的document.domain，在这种情况下他们可以直接通信。

如果不是，则有几种不同的跨域通信方式，例如通过设置/读取 iframe url 的哈希组件

Look here for more information

【讨论】：

很高兴知道这一点，但就我而言，我不需要跨域通信 - 一切都停留在一个域上。

【解决方案2】：

您可以遍历父文档中的所有 iframe-elements，并将 iframe-elements 的 contentWindow-property 与 iframe 内的 window-object 进行比较（应该相等，但我还没有测试过）

P.S.：现在测试了，工作正常http://www.jsfiddle.net/doktormolle/CMdLZ/

【讨论】：

我想过同样的解决方案，但它效率很低，因为它必须搜索 iframe。
恐怕除了某种搜索之外别无他法，只要窗口没有属性来确定父 DOM 元素。另一种解决方案可能是给 iframe-element 一个 ID 并将 ID 与表单一起提交，这样您就可以使用 parent.document.getElementById('submitted_ID') 直接访问 DOM-element

【解决方案3】：

使用 window.parent 可以获得父窗口。您也可以在其上调用方法。所以使用下面的代码你可以通知你已经完成加载的 iframe 父级（你需要在父窗口中有一个 notifyLoaded 函数。

window.parent.notifyLoaded(window);

因为我们给了自己的窗口，所以父级可以循环所有已知的 iframe 并检查加载了哪个（使用 iframe.contentWindow 来获取某个 iframe 的窗口）

【讨论】：

是的，contentWindow 扫描的解决方案是我能想到的最好的解决方案......我想知道是否有更好的解决方案，但它目前似乎是唯一的方法。

【解决方案4】：

就像 Stefaan id 说 window.parent 但你也应该检查 window.frameElement。

【讨论】：

看起来这就是我一直在寻找的……似乎所有主流浏览器都支持它，尽管它不是任何标准的一部分。
这不是iframe的父级，而不是当前的iframe吗？