web-dev-qa-db-fra.com

Comment obtenir le contenu du corps d'un iframe en Javascript?

<iframe id="id_description_iframe" class="rte-zone" height="200" frameborder="0" title="description">
  <html>
    <head></head>
    <body class="frameBody">
      test<br/>
    </body>
  </html>
</iframe>

Ce que je veux obtenir c'est:

test<br/>
javascripthtmliframe
141
omg

La question exacte est de savoir comment le faire avec du JavaScript pur et non avec jQuery.

Mais j'utilise toujours la solution que l'on peut trouver dans le code source de jQuery. C'est juste une ligne de JavaScript natif.

Pour moi, c'est le meilleur, facile à lire et même autant que je sache , le moyen le plus rapide de récupérer le contenu des iframes.

Commencez par obtenir votre iframe 

var iframe = document.getElementById('id_description_iframe');

// or
var iframe = document.querySelector('#id_description_iframe');

Et utilisez ensuite la solution de jQuery 

var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

Cela fonctionne même dans Internet Explorer qui fait cette astuce lors de l'utilisation de la propriété contentWindow de l'objet iframe. La plupart des autres navigateurs utilisent la propriété contentDocument et c'est la raison pour laquelle nous vérifions cette propriété d'abord dans cette condition OR. S'il n'est pas défini, essayez contentWindow.document.

Sélectionne des éléments dans iframe

Ensuite, vous pouvez généralement utiliser getElementById() ou même querySelectorAll() pour sélectionner l'élément DOM à partir de iframeDocument:

if (!iframeDocument) {
    throw "iframe couldn't be found in DOM.";
}

var iframeContent = iframeDocument.getElementById('frameBody');

// or
var iframeContent = iframeDocument.querySelectorAll('#frameBody');

Fonctions d'appel dans l'iframe

Obtenez simplement l'élément window de iframe pour appeler des fonctions globales, des variables ou des bibliothèques entières (par exemple, jQuery):

var iframeWindow = iframe.contentWindow;

// you can even call jQuery or other frameworks
// if it is loaded inside the iframe
iframeContent = iframeWindow.jQuery('#frameBody');

// or
iframeContent = iframeWindow.$('#frameBody');

// or even use any other global variable
iframeWindow.myVar = window.myVar;

// or call a global function
var myVar = iframeWindow.myFunction(param1 /*, ... */);

Remarque

Tout cela est possible si vous observez le politique de même origine .

143
algorhythm

En utilisant JQuery, essayez ceci:

$("#id_description_iframe").contents().find("body").html()
68
Michael Adedayo

cela fonctionne parfaitement pour moi:

document.getElementById('iframe_id').contentWindow.document.body.innerHTML;
36
bizzr3

Autant que je sache, un Iframe ne peut pas être utilisé de cette façon. Vous devez pointer son attribut src vers une autre page.

Voici comment obtenir son contenu en utilisant le vieux javascript de l'avion. Cela fonctionne avec IE et Firefox.

function getFrameContents(){
   var iFrame =  document.getElementById('id_description_iframe');
   var iFrameBody;
   if ( iFrame.contentDocument ) 
   { // FF
     iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
   }
   else if ( iFrame.contentWindow ) 
   { // IE
     iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
   }
    alert(iFrameBody.innerHTML);
 }
23
Jose Basilio

utilisez content dans iframe avec JS:

document.getElementById('id_iframe').contentWindow.document.write('content');
10
CoursesWeb

Je pense que placer du texte entre les balises est réservé aux navigateurs qui ne peuvent pas gérer les iframes i.e ...

<iframe src ="html_intro.asp" width="100%" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

Vous utilisez l'attribut 'src' pour définir la source des iframes html ...

Espérons que cela aide )

4
user110714

Le code suivant est compatible avec tous les navigateurs. Cela fonctionne dans IE7, IE8, Fx 3, Safari et Chrome, vous n'avez donc pas besoin de gérer les problèmes entre navigateurs. N'a pas testé dans IE6.

<iframe id="iframeId" name="iframeId">...</iframe>

<script type="text/javascript">
    var iframeDoc;
    if (window.frames && window.frames.iframeId &&
        (iframeDoc = window.frames.iframeId.document)) {
        var iframeBody = iframeDoc.body;
        var ifromContent = iframeBody.innerHTML;
    }
</script>
3
nekno

Chalkey est correct, vous devez utiliser l'attribut src pour spécifier la page à contenir dans l'iframe. Si vous le faites et que le document dans l'iframe se trouve dans le même domaine que le document parent, vous pouvez utiliser ceci:

var e = document.getElementById("id_description_iframe");
if(e != null) {
   alert(e.contentWindow.document.body.innerHTML);
}

Évidemment, vous pouvez alors faire quelque chose d’utile avec le contenu au lieu de simplement les mettre en alerte.

2
Graham Clark