如何使用document.getElementById选择iframe内的元素

Question

如何使用document.getElementById选择iframe内的元素

javascripthtmliframegetelementbyidframeset

92

我有一个像这样的 iframe

<iframe name="myframe1" id="myframe1" width="100%" height="100%" src="a.html">
<html>
    <head></head>
    <frameset name="myframe2" cols="0%, 100%" border="0" frameBorder="0" frameSpacing="0">
        <frame name="page1" src="c.html" scrolling="no"></frame>
        <frame name="page2" src="d.html" >
            <html>
                <head></head>
                <body id="top">
                    <div id="div1">
                        <div id="div2">
                            <div id="div3">
                                <ul id="x">
                                    <li>a</li>
                                    <li>b</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </body>
            </html>

        </frame>

    </frameset>
</html>
</iframe>

我想要引用元素"x"，尝试了几种方法但未找到解决方案。

- ishk

1

可能是从iFrame内获取元素的重复问题。 - Lying_cat

6个回答

25

使用contentDocument来实现这个目标。

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

var ulObj = innerDoc.getElementById("ID_TO_SEARCH");

- Hary

8

确保在进行操作前，iframe已经加载完成。

contentWindow.document

否则，你的getElementById将会是null。

PS：无法评论，因为声望还不够高，但这是对选择答案的跟进，因为我花了一些时间进行调试，试图弄清楚在选择内部iframe元素之前我应该如何强制加载iframe。

- Pat

3

您需要确保框架已完全加载，最好的方法是使用 onload：

<iframe id="nesgt" src="" onload="custom()"></iframe>

function custom(){
    document.getElementById("nesgt").contentWindow.document;
    }

当iframe完全加载时，此函数将自动运行。

- Mostafa Esmaeili

2

在我的情况下，我尝试获取pdfTron工具栏，但不幸的是每次刷新页面时它的ID都会改变。因此，我最终使用了这个一行代码来抓取它： const pdfToolbar = document.getElementsByTagName('iframe')[0].contentWindow.document.getElementById('HeaderItems'); 因为在通过tagName编写的数组中，您的应用程序中始终会有固定的iFrames索引。 "pdfTron"被译成"pdfTron"，"ID"被译成"ID"。

- Divyanshu Rawat

0

抱歉，我没有足够的声望来添加评论，但在这种情况下写答案可能是可以的。我一直在寻找更改iframe中某些html的css的方法。我有一个书签代码，在iframe外部工作得很好，所以我已经接近成功：

javascript:(function(){ var style = document.createElement('style'), styleContent = document.createTextNode('.notifications-list--cMVsqVbKkaXV4SQ {zoom: 0.8!important;}'); style.appendChild(styleContent); var caput = document.getElementsByTagName('head'); caput[0].appendChild(style); })();

我的 iframe 名称为 xm-feed-iframe

所以我猜你需要更改代码为

document.getElementById('xm-feed-iframe').contentWindow.document.getElementById('x')

但是我需要使用类来更改CSS样式。所以我想这可能就像更改一样简单。

var caput = document.getElementsByTagName('head')

到

var caput = document.getElementById('xm-feed-iframe').contentWindow.document.getElementsByTagName('head')

因此最终的代码将是

javascript:(function(){ var style = document.createElement('style'), styleContent = document.createTextNode('.notifications-list--cMVsqVbKkaXV4SQ {zoom: 0.8!important;}'); style.appendChild(styleContent); var caput = document.getElementById('xm-feed-iframe').contentWindow.document.getElementsByTagName('head'); caput[0].appendChild(style); })();

嘿，它奏效了。我现在可以深入一点，并希望将一些计数器添加到出现在iframe中的列表中！:)

如果对代码有任何评论，我将不胜感激，因为我是自学的！

希望这能帮助其他人

谢谢

更新：在这里 - 我知道使用书签工具现在有一个编号列表。我的生活现在会更加轻松，因为我不再会迷失需要下载的所有项目。:D

- Rodp

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

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

- Fabrício Matté · Accepted Answer

document.getElementById('myframe1').contentWindow.document.getElementById('x')

Fiddle

contentWindow 可以被包括IE早期版本在内的所有浏览器支持。

请注意，如果 iframe 的 src 来自另一个域，由于同源策略，您将无法访问其内容。