如何从子 javascript 页面访问父 iframe 元素？答案

【问题标题】：How to access parent iframe elements from a child javascript page?如何从子 javascript 页面访问父 iframe 元素？
【发布时间】：2009-09-20 04:18:47
【问题描述】：

我有 2 页：父母和孩子。

在父页面中，我有一个 iframe，我想在子页面的 JavaScript 中获取其值。有什么办法吗？....请指教。

【问题讨论】：

您的父母和孩子是否在同一个域中？如果它们不在同一个域中，跨站点域策略不允许 javascript 在它们之间进行通信。

标签： javascript iframe

【解决方案1】：

实际上只需要iframeElement。

从子文档内部：

 var iframe = frameElement;

你就完成了。

【讨论】：

美女！除您的建议外，其他所有内容均返回“未定义”。实际上它是'window.frameElement'，但绝不会少，很好的答案......

【解决方案2】：

假设你的页面和框架结构如下

父级（包含 iframe） |--> 子页面（尝试在父页面中访问 iframe）

还有那个

iframe和其他页面的src是一样的
iframe 的名称是“iFrame”，

您可以使用来自子级的以下 JavaScript 语句访问 iframe 中名为“iFrameElement”的元素：

parent.frames['iFrame'].document.getElementById('iFrameElement').value;

或者只是来自包含 iframe 的父级的以下内容

frames['iFrame'].document.getElementById('iFrameElement').value;

由于框架名称在运行时是不确定的，您可以恢复为使用 window.frames 数组中的框架编号，如下（来自子级）

//assuming frames[0] refers to the iframe
parent.window.frames[0].document.getElementById('iFrameElement').value;

或来自父母

//assuming frames[0] refers to the iframe
window.frames[0].document.getElementById('iFrameElement').value;

【讨论】：

非常感谢 Vineet 的建议。我的页面 n 框架结构是-- 父级（包含 iframe）|--> 子页面 javascript 尝试访问父级中的 iframe。在我的情况下，每次加载页面时，父级中的 iFrame 名称 n id 都会动态生成。那么如何处理这种情况呢？..请求您分享您的知识。
您可以将框架名称和 id 传递给孩子，也可以避免按名称引用框架，而是按框架编号引用它。
谢谢 Vineet。我将尝试实现这一点，并让您知道它是否有效。

【解决方案3】：

使用

parent.getElementById('elementId').value;

获取元素。如果你有多个嵌套的 iframe，你可以通过使用来获取根父级

top.getElementById('elementId').value;

两者都适用于您的情况。

【讨论】：

感谢科里的建议。但我尝试过使用相同的。它返回 - “未定义”。通过使用您的解决方案，我能够获取父页面中所有元素的值，但不能获取 iframe 中的元素。是否有其他方法可以在 iframe 的情况下获取值？请求分享您的知识。

【解决方案4】：

你可以使用

window.parent.getElementById('YOUR ID').value();

从父元素的 id 为“YOUR ID”的输入元素中获取值。

【讨论】：

感谢克里斯汀的建议。但我尝试过使用相同的。它返回 - “未定义”。通过使用您的解决方案，我能够获取父页面中所有元素的值，但不能获取 iframe 中的元素。是否有其他方法可以在 iframe 的情况下获取值？请求分享您的知识。
我没有对此进行测试，但我想它会以这种方式完成。 window.parent.frames['iframe_name'].getElementById('element id').value; 'iframe_name' 当然是你在调用者上的名字。
也许你需要在 .getElementById() 之前添加 .document

【解决方案5】：

尝试为您的 iframe 命名并像这样访问 iframe

window.parent.<iframe_name>.document.getElementById()

【讨论】：

非常感谢 Umesh 的建议。我的页面 n 框架结构是-- 父级（包含 iframe）|--> 子页面 javascript 尝试访问父级中的 iframe。在我的情况下，每次加载页面时都会动态生成父级中的 iFrame 名称 n id。那么如何处理这种情况呢？..请求您分享您的知识。

【解决方案6】：

您可以通过这种方式从 iframe 内部获取父文档中 iframe 的元素：

var iframe = parent.document.getElementById(window.frameElement.id);

【讨论】：