时间戳

首页 > 解决方案 > 如何获取文档上的所有嵌套 iframe？

javascript - 如何获取文档上的所有嵌套 iframe？

问题描述

我发现了许多相关的问题，但没有一个对我有用的解决方案，所以如果这是一个骗局，我们深表歉意。

我有以下 HTML 结构（简化）：

<html>
<head>
</head>
<body style="">
    <div>
        <div>
            <div>
                <iframe>
                    <html>
                        <head></head>
                        <body>
                            <div></div>
                            <iframe>
                                <html>
                                    <head></head>
                                    <body>
                                        <div>
                                            <iframe src="about:blank">
                                                <html>
                                                    <head></head>
                                                    <body>
                                                        <img />
                                                        <iframe id="some_random_id">
                                                            <html>
                                                                <head></head>
                                                                <body>
                                                                    <div>
                                                                        <!-- main content -->
                                                                    </div>
                                                                </body>
                                                            </html>
                                                        </iframe>
                                                    </body>
                                                </html>
                                            </iframe>
                                        </div>
                                    </body>
                                </html>
                            </iframe>
                        </body>
                    </html>
                </iframe>
            </div>
        </div>
    </div>
</body>
</html>

我想检索所有 iframe，最好是在一个数组中。我尝试了以下方法：

document.getElementsByTagName('iframe')

但这会返回一个大小为 1 的数组：[iframe]

window.frames.length给我1

我想过做类似的事情：

var a = document.getElementsByTagName('iframe')[0]
var b = a.getElementsByTagName('iframe')[0] 
// b is undefined
var b = a.contentDocument.getElementsByTagName('iframe')[0]
// b is undefined

有没有办法检索页面上的所有 iframe？或者，只获取最后一个（带有 id 的那个some_random_id）也可以，但我不能使用 id 来选择它，因为 html 是由第三方创建的。

编辑：我不认为我的问题与在带有 iFrame 的页面上使用 document.getElementsByTagName 重复 - iframe 内的元素没有被拾取， 因为此问题中接受的答案使用：

for( j=0; j<m; j++) {
    ...
}

m在哪里document.getElementsByTagName('iframe').length。但就我而言，它具有价值1，因此我无法访问嵌套的 iframe。

标签： javascripthtmliframe

解决方案

您使用的<iframe>标签绝对错误！您想阅读来自<iframe>tag的文档：

允许的内容：后备内容，即通常不呈现但不支持该<iframe>元素的浏览器将呈现的内容。

换句话说，如果浏览器不支持该元素，则将呈现<iframe>和标签之间的内容。</iframe><iframe>

您有两种使用<iframe>标签的可能性：

  1. 在标签的src属性中，<iframe>您可以编写 HTML 文件的路径。
  2. 在标签的src属性中，<iframe>您可以编写"about:blank"然后使用 JS 将内容添加到 this<iframe>中。

如果您想查找一些元素或操作此 iframe 中的内容，您可以使用以下代码：

var iframe = document.getElementById('iframeId'),
    innerDoc = iframe.contentDocument ? iframe.contentDocument 
             : iframe.contentWindow.document;

您应该确保您可以访问您的<iframe>.
请阅读有关它的跨域资源共享 (CORS)文章。

如果要获取文档上所有嵌套 iframe 的计数，则必须<iframe>分别为每个嵌套 iframe 找到它，并将此计数添加到全局 iframe 计数变量中。不要忘记 CORS（见上文）。

推荐阅读