如何在JavaScript中获取子HTML元素？

Question

5

我有一个看起来像这样的iframe：

<iframe id="iframe2" ...>
    #document
        <html>...</html>
</iframe>

我正在尝试获取带有 html 标签的 iframe 下方的项目。
在 JavaScript 中，当我执行以下操作时：

document.getElementByID("iframe2")

这将返回正确的iframe。

然而，当我执行以下操作时：

document.getElementByID("iframe2").childNodes

返回值为[]。

document.getElementByID("iframe2").getElementsByTagName("#document")和document.getElementByID("iframe2").getElementsByTagName("html")也返回[]。

如何访问html标签？
此外，那个#document标签叫什么？

- Di Zou

可能是 https://dev59.com/RnNA5IYBdhLWcg3whuV_ 的重复问题。 - kapa

听起来非常像这个：https://dev59.com/nHNA5IYBdhLWcg3wHp6B - Hauke Haien

有些问题。#document是什么？难道不只是文本吗？将文本与HTML标签混合可能导致整个内容都被视为文本节点。 - Kamyar Infinity

@Kamyar #document 不是真正的子节点；它是由Chrome开发工具（可能还包括Firebug）插入的占位符，代表iframe的contentDocument属性。 - apsillers

@Kamyar #document 就是它看起来的样子。当我进行元素检查时，发现在 iframe 中嵌套了一个 "#document"。 - Di Zou

4个回答

2

请尝试这段代码：

var a = document.getElementById("iframe2").firstChild;

- Bunlong

2

尝试这个：

var a = document.getElementById("iframe2").getElementsByTagName("*")[0];

- Alexandre Khoury

0

IFrame内容的URL与父页面具有相同的域名吗？如果不是，则由于同源策略，您将无法访问IFrame内部的任何内容。

- Matt Coughlin

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

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

- apsillers · Accepted Answer

document.getElementByID("iframe2").contentWindow.document

或者，老版本的IE不支持此变量。

document.getElementByID("iframe2").contentDocument

这将为您提供嵌入页面的document对象，然后您可以使用.documentElement、.body或.head属性获取html/body/head DOM。

如果您想要嵌入页面的window对象，请使用contentWindow而不是contentDocument。

MDN提供了一个关于iframe脚本编写的指南，您可能会发现很有帮助。