1
votes

Comment trouver un élément spécifique dans des iframes imbriquées

J'ai besoin de trouver un élément spécifique, qui se trouve à l'intérieur d'une iframe, à partir d'un composant parent, la structure serait quelque chose comme ceci: (Juste un exemple)
Edit: Voir les commentaires ci-dessous concernant la nature de cet exemple

<iframe id ='if1'>
    <iframe id ='if2'>
        <iframe id ='if3'>
            <iframe id ='if4'>
                <input type='hidden' id ='elementToBeFound'>
            </iframe>
        </iframe>
    </iframe>
</iframe>

Maintenant, comment puis-je faire cela avec javascript? (Peut également être jquery ou un autre assistant)
J'ai une référence à la première iframe ('if1'), je voulais rechercher tous les nœuds enfants jusqu'à ce que je trouve 'elementToBeFound'.
Est-ce possible?
Merci d'avance.

Ma question est différente de celles existantes, car je souhaite accéder à plusieurs iframes à l'intérieur des iframes, pas seulement à un niveau.


5 commentaires

Voulez-vous le trouver avec un identifiant? pourquoi n'utilisez-vous pas getElementById?


Cela ne fonctionnera pas, tout ce qui se trouve entre les balises d'une iframe ne sera jamais rendu avec les navigateurs modernes. De plus, aucun de ces iframes n'a d'attribut src ou srcdoc qui le rend encore plus cassé.


Possible duplication de Finding child element from iFrame via getElementById ou une autre technique?


@ zer00ne a raison, aucune iframe n'est rendue dans une autre iframe. Je viens de trouver cette structure en production (elle doit avoir été générée dynamiquement, avec src) et je voulais trouver un élément. Quoi qu'il en soit, je pourrais résoudre le problème sans avoir à y accéder, donc le problème a été esquivé.


Salut @ EliâMelfior heureux que vous ayez résolu votre problème.


3 Réponses :


1
votes

Je pense que quelque chose comme ça devrait fonctionner:

const elem = document.getElementById('if1').contentDocument
.getElementById('if2').contentDocument
.getElementById('if3').contentDocument
.getElementById('if4').contentDocument
.getElementById('elementToBeFound')

Mais bien sûr, toutes les fenêtres doivent être chargées pour ce faire. Dans le vrai travail, cela peut être plus compliqué, vous devrez écouter l'événement de chargement pour chaque iframe pour pouvoir vérifier ce qu'il y a à l'intérieur.


0 commentaires

-1
votes

Vous pouvez obtenir l'élément div en utilisant l'appel iframe.contentWindow .

Voici l'exemple:

REMARQUE: vous devez utiliser "src" (iframes externes) pour le faire fonctionner

   <!DOCTYPE html>
    <html>
    <head>
      <title>IF1</title>
    </head>

    <body>
      <iframe id='if1' src="./iframe2.html">
        <!-- <iframe id='if2'>
          <iframe id='if3'>
            <iframe id='if4'> -->
              <!-- <div id='elementToFind'>Hello</div> -->
            <!-- </iframe>
          </iframe>
        </iframe> -->
      </iframe>

      <script>

        window.onload = function() {
          let if1 = document.getElementById('if1').contentWindow;
          let if2 = if1.document.getElementById('if2').contentWindow;
          let div = if2.document.getElementById('elementToFind');
          console.log(div)
        }

      </script>
    </body>

    </html>


0 commentaires

0
votes

Vous pouvez utiliser cette fonction pour interroger n'importe quel élément de la page, qu'il soit imbriqué dans une iframe:

function querySelectorAllInIframes(selector) {
  let elements = [];

  const recurse = (contentWindow = window) => {

    const iframes = contentWindow.document.body.querySelectorAll('iframe');
    iframes.forEach(iframe => recurse(iframe.contentWindow));
    
    elements = elements.concat(contentWindow.document.body.querySelectorAll(selector));
  }

  recurse();

  return elements;
};

querySelectorAllInIframes('#elementToBeFound');

Remarque: gardez à l'esprit que chacun des iframes de la page devra être de la même origine, sinon cette fonction générera une erreur.


0 commentaires