web-dev-qa-db-fra.com

Comment choisir un élément dans iframe en utilisant document.getElementById

J'ai un iframe comme celui-ci

<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>

Je veux faire référence à l'élément "x". J'ai essayé de plusieurs manières mais je n'ai pas pu trouver de solution.

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

Fiddle

contentWindow est pris en charge par tous les navigateurs, y compris les anciennes versions de IE.

Notez que si iframe 'src provient d'un autre domaine, vous ne pourrez pas accéder à son contenu en raison de politique de même origine .

136
Fabrício Matté

utilisez contentDocument pour y parvenir

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

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

(ceci est à ajouter à la réponse choisie)

Assurez-vous que le iframe est chargé avant de

contentWindow.document

Sinon, votre getElementById sera null.

PS: Je ne peux pas commenter, réputation encore faible à commenter, mais il s’agit d’un suivi de la réponse choisie, car j’ai passé du bon temps de débogage à essayer de comprendre que je devrais forcer le chargement de iframe avant de sélectionner l'élément inner-iframe.

2
Pat

Dans mon cas, j'essayais de saisir la barre d'outils pdfTron, mais malheureusement, son ID change chaque fois que vous actualisez la page.

Alors, j'ai fini par l'attraper en le faisant.

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

Comme dans le tableau écrit par tagName, vous aurez toujours l'index fixe pour les iFrames dans votre application.

0
Divyanshu Rawat