如何使用 Javascript 访问 iframe 元素？

Posted 2023-02-21

【中文标题】如何使用 Javascript 访问 iframe 元素？

【英文标题】：How can I access iframe elements with Javascript?

【发布时间】：2010-11-29 23:40:50

【问题描述】：

我有一个网页，其中 iframe 中有一个文本区域。我需要从它的子页面 javascript 中读取这个 textarea 的值。目前通过在 JavaScript 中使用window.parent.getelementbyID().value，我能够获取父页面中除 iframe 中的 textarea 之外的所有控件的值。

我的父页面中的框架 id 和框架名称在运行时发生变化，因此我们不能使用框架 id/框架名称作为参考。

【问题讨论】：

完全重复：***.com/questions/1451208

@archana：RaYell 的回答 ***.com/questions/1451208/1451455#1451455 包含您第一次提出此问题时的评论。如果您不知道框架 ID 或名称，您可以使用 document.frames[0].document.getElementById()（如果不是页面上的第一个 <iframe>，则可以使用其他索引。

Access iframe elements in JavaScript的可能重复

【参考方案1】：

如果你有 html

<form name="formname" .... id="form-first">
    <iframe id="one" src="iframe2.html">
    </iframe>
</form>

和 JavaScript

function iframeRef( frameRef ) 
    return frameRef.contentWindow
        ? frameRef.contentWindow.document
        : frameRef.contentDocument


var inside = iframeRef( document.getElementById('one') )

inside 现在是对文档的引用，因此您可以根据 iframe src 中的内容执行 getElementsByTagName('textarea') 和任何您喜欢的操作。

【讨论】：

只有 1 个关注 Meder-- var inside = iframeRef( document.getElementById('one') ) 我页面中的 frameid n 框架名称在运行时发生变化，因此无法传递 frameid(as由你完成）。还有其他选择吗？

是的。 getElementsByTagName('iframe') 引用 nodeList 并使用 [0] 访问内部元素，假设您正在处理一个。或者你可以做一个循环。

谢谢梅德。再多1个查询--'frameRef.contentWindow.document'和'frameRef.contentDocument'有什么区别我想了解这背后的概念。如果你能解释一下，那真的很好。非常感谢您的帮助。

可以找到解释 @xkr.us/articles/dom/iframe-document 一些浏览器支持其中一个 dom 属性，我只检查其中一个。

你是天才梅德。非常感谢您的即时帮助。

【参考方案2】：

使用 jQuery 你可以使用contents()。例如：

var inside = $('#one').contents();

【讨论】：

这里的一个重要考虑是，contents 方法可以“获取 iframe 的内容文档，如果 iframe 与主页位于同一域中。”