如何使用 document.getElementById 在 iframe 中选取元素

IT技术 javascript html iframe getelementbyid frameset
2021-01-17 14:42:38

我有一个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”。我尝试了多种方法,但找不到解决方案。

5个回答
document.getElementById('myframe1').contentWindow.document.getElementById('x')

小提琴

contentWindow 所有浏览器都支持,包括旧版本的 IE。

请注意,如果iframe'ssrc来自另一个域,由于同源策略,您将无法访问其内容

最后一句非常重要;) 您的框架源必须在您页面的同一域中
2021-04-05 14:42:38
但是如果框架的源不属于同一个域呢?如何解决?问候,米克。
2021-04-08 14:42:38

用于contentDocument实现此目的

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

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

(这是添加到所选答案中)

确保iframe在你之前加载

contentWindow.document

否则,你getElementById会的null

PS:无法评论,评论的声誉仍然很低,但这是对所选答案的跟进,因为我花了一些很好的调试时间试图弄清楚我应该iframe在选择内部 iframe 元素之前强制加载。

就我而言,我试图获取pdfTron工具栏,但不幸的是,每次刷新页面时它的ID 都会更改。

所以,我最终通过这样做抓住了它。

const pdfToolbar = document.getElementsByTagName('iframe')[0].contentWindow.document.getElementById('HeaderItems');

正如在 tagName 写入的数组中一样,您的应用程序中将始终拥有 iFrame 的固定索引。

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

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

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

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

可以使用 setTimeout 完成,但我们无法获得帧加载的确切时间。

希望这有助于某人。