如何使用JavaScript访问iframe元素？

Question

如何使用JavaScript访问iframe元素？

74

我有一个包含 iframe 的网页，其中有一个文本区域。我需要从子页面的 JavaScript 中读取此 textarea 的值。目前，通过在 JavaScript 中使用 window.parent.getelementbyID().value，我能够获取父页面中所有控件的值，但无法获取 iframe 内部的 textarea 值。

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

- archana roy

2

精确复制：https://dev59.com/knM_5IYBdhLWcg3wQQ3w - Grant Wagner

@archana：RaYell的回答https://dev59.com/knM_5IYBdhLWcg3wQQ3w包括了第一次你提出这个问题时的评论。如果你不知道框架的ID或名称，你可以使用`document.frames[0].document.getElementById()`（或者如果它不是页面上第一个`<iframe>`，则使用其他索引）。 - Grant Wagner

2

可能是重复的问题：如何在JavaScript中访问iframe元素。 - Daniel Beck

2个回答

19

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

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

- Doug Amos

21

重要的考虑因素是，如果iframe与主页面在同一个域名下，contents方法可以“获取iframe的内容文档”。 - codeymcgoo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- meder omuraliev · Accepted Answer

如果您拥有这段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')或其他你喜欢的操作。