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

ish*_*shk 61 html javascript iframe frameset getelementbyid

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>
Run Code Online (Sandbox Code Playgroud)

我想引用元素"x".我尝试了几种方法,但我找不到解决方案.

Fab*_*tté 144

document.getElementById('myframe1').contentWindow.document.getElementById('x')
Run Code Online (Sandbox Code Playgroud)

小提琴

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

请注意,如果iframesrc是从另一个域,您将无法访问其内容,由于同源策略.

  • 最后一句非常重要;)您的框架的源必须位于您网页的同一个域中 (32认同)
  • 但是如果框架的源不属于同一个域怎么办?怎么解决呢?问候,米克。 (6认同)

mbh*_*n88 19

使用contentDocument来实现这一目标

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

var ulObj = innerDoc.getElementById("ID_TO_SEARCH");
Run Code Online (Sandbox Code Playgroud)


Pat*_*Pat 8

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

确保iframe在您之前加载

contentWindow.document
Run Code Online (Sandbox Code Playgroud)

否则,你的getElementById将会是null

PS:无法发表评论,评论声誉仍然很低,但这是所选答案的后续内容,因为我花了一些很好的调试时间试图找出在iframe选择内部 iframe 元素之前应该强制加载。