web-dev-qa-db-ja.com

document.getElementByIdを使用してiframe内の要素を選択する方法

このような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」を参照したい。いくつかの方法で試しましたが、解決策が見つかりませんでした。

javascripthtmliframegetelementbyidframeset
58
ishk
document.getElementById('myframe1').contentWindow.document.getElementById('x')

Fiddle

contentWindow は、IEの古いバージョンを含むすべてのブラウザーでサポートされています。

iframeのsrcが別のドメインからのものである場合、 Same Origin Policy のためにそのコンテンツにアクセスできないことに注意してください。

136
Fabrício Matté

contentDocument を使用してこれを達成します

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

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

私の場合、pdfTron toolbarを取得しようとしていましたが、残念ながらIDはページを更新するたびに変更されます。

それで、私はそうすることによってそれをつかむことになりました。

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

TagNameで作成された配列のように、アプリケーションのiFrameのインデックスは常に固定されています。

0
Divyanshu Rawat