从父页面调用 iframe 中的 JavaScript 代码

Question

基本上，我在页面中嵌入了一个 iframe ，并且 iframe 有一些我需要从父页面调用的 JavaScript 例程。

现在相反很简单，因为您只需要调用 parent.functionName() ，但不幸的是，我需要的正好相反。

请注意，我的问题不是更改 iframe 的源 URL ，而是调用 iframe 中定义的函数。

原文由 Tamas Czinege 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

假设您的 iFrame 的 id 是“targetFrame”，而您要调用的函数是 targetFunction() ：

 document.getElementById('targetFrame').contentWindow.targetFunction();

您还可以使用 window.frames 而不是 document.getElementById 访问框架。

 // this option does not work in most of latest versions of chrome and Firefox
 window.frames[0].frameElement.contentWindow.targetFunction();

原文由 Joel Anair 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这里有一些怪癖需要注意。

1. HTMLIFrameElement.contentWindow 可能是更简单的方法，但它不是一个标准属性，一些浏览器不支持它，主要是旧浏览器。这是因为 DOM Level 1 HTML 标准对 window 对象没有任何说明。

2. 您也可以尝试 HTMLIFrameElement.contentDocument.defaultView ，一些较旧的浏览器允许，但 IE 不允许。即便如此，出于与 (1) 相同的原因，该标准并未明确表示您会返回 window 对象，但如果您愿意，可以在此处选择一些额外的浏览器版本。

3. window.frames['name'] 返回窗口是最古老的接口，因此也是最可靠的接口。但是您随后必须使用 name="..." 属性才能按名称获取框架，这有点难看/已弃用/过渡。 （ id="..." 会更好，但 IE 不喜欢那样。）

4. window.frames[number] 也很可靠，但知道正确的索引是诀窍。你可以摆脱这个，例如。如果您知道页面上只有一个 iframe。

5. 完全有可能子 iframe 尚未加载，或者其他原因导致它无法访问。您可能会发现反转通信流更容易：也就是说，让子 iframe 在完成加载并准备好回调时通知其 window.parent 脚本。通过将它自己的对象之一（例如回调函数）传递给父脚本，该父脚本然后可以直接与 iframe 中的脚本通信，而不必担心它与什么 HTMLIFrameElement 相关联。

原文由 bobince 发布，翻译遵循 CC BY-SA 3.0 许可协议