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

154 
<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, c'est:

test<br/>
javascript html iframe OMG
la source
52
Remarque importante: vous ne pouvez pas accéder au contenu d'un iFrame s'il s'agit de plusieurs domaines. Voir la politique de même origine .
HellaMad

Réponses:

154

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

Mais j'utilise toujours la solution qui se trouve dans le code source de jQuery. C'est juste une ligne de JavaScript natif.

Pour moi, c'est le meilleur moyen, facile à lire et même le plus court pour obtenir 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 puis utilisez la solution de jQuery

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

Cela fonctionne même dans Internet Explorer qui fait cette astuce lors de la contentWindowpropriété de l' iframeobjet. La plupart des autres navigateurs utilisent la contentDocumentpropriété et c'est la raison pour laquelle nous vérifions cette propriété d'abord dans cette condition OR. Si ce n'est pas le cas, essayez contentWindow.document.

Sélectionnez des éléments dans l'iframe

Ensuite, vous pouvez généralement utiliser getElementById()ou même querySelectorAll()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');

Appeler des fonctions dans l'iframe

Obtenez juste l' windowélément de iframepour 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 la politique de même origine .

algorithme
la source
2
iframe n'est pas défini ici, soit vous devez écrire le code complet, soit ne pas écrire jQuery avec
Tarun Gupta
13
Veuillez m'excuser, mais la ligne de code est un extrait du code jquery et le bloc de code est mon propre exemple de code. Le reste devrait être évacué. la seule chose qui vous manque est la variable iframe. Et je ne peux pas savoir où se trouve votre iframe ou comment se trouve son identifiant.
algorhythm
5
Pourriez-vous s'il vous plaît ajouter un avertissement en haut de la réponse que cela ne fonctionne pas si l'iframe a un src distant? Si je me trompe, j'apprécierais si vous pouviez m'indiquer comment je peux toujours obtenir le contenu iframe sans envoyer une autre requête HTTP (pas possible car j'ai besoin de javascript exécuté pour construire le contenu iframe et je ne veux pas déployer un deuxième environnement javascript si évitable).
Zackline
1
J'ai un tel avertissement. Mais à la fin de mon explication. Vous devez respecter la politique de même origine. C'est tout.
algorhythm
2
Pour que ce qui précède fonctionne, je devais le mettre en document.querySelector('#id_description_iframe').onload = function() {... espérant que cela aide quelqu'un.
user3442612
71

En utilisant JQuery, essayez ceci:

$("#id_description_iframe").contents().find("body").html()
Michael Adedayo
la source
27
Cela ne fonctionne pas car les "domaines, protocoles et ports doivent correspondre". : Tentative JavaScript non sécurisée pour accéder au cadre avec URL
Ionică Bizău
2
Comme mentionné, cela fonctionnerait si les domaines correspondent. FYI, je viens de découvrir que $ ("# id_description_iframe #id_of_iframe_body"). Html () fonctionne dans Chrome mais pas dans toutes les versions de Firefox, et donc utiliser ce qui précède est très bien. Ie $ ("# id_description_iframe #id_of_iframe_body"). Contents (). Find ("body"). Html () a fonctionné dans les deux
hobailey
41

cela fonctionne parfaitement pour moi: 

document.getElementById('iframe_id').contentWindow.document.body.innerHTML;
bizzr3
la source
3
C'est étrange, mais pour moi .bodyne fonctionne pas. Mais le .getElementsByTagName('body')[0]fait.
Jenny O'Reilly
ce n'est pas ".body", juste "body". supprimer le point
Arjun
1
cela devrait être la réponse si vous êtes dans le javascript vanille.
Jovanni G
23

AFAIK, 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 corporel en utilisant l'ancien javascript d'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);
 }
José Basilio
la source
1
il le fait en safari (branche à savoir)
Andrei Cristian Prodan
ayant un problème de domaine croisé, a bloqué une trame avec l'origine " someOther.com " d'accéder à une trame d'origine croisée.
lannyf
10

utiliser contentdans iframe avec JS:

document.getElementById('id_iframe').contentWindow.document.write('content');
Cours Web
la source
5

Je pense que placer du texte entre les balises est réservé aux navigateurs qui ne peuvent pas gérer les iframes, c'est-à-dire.

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

J'espère que cela aide :)


la source
3

Le code suivant est compatible avec tous les navigateurs. Il fonctionne dans IE7, IE8, Fx 3, Safari et Chrome, 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>
nekno
la source
Le html ci-dessous a fonctionné pour moi dans Chrome 7 sur Mac. J'ai testé cet article original dans Chrome 6 sur Windows et cela a bien fonctionné. <html> <head> </head> <body> <iframe id = "iframeId" name = "iframeId"> ... </iframe> <script type = "text / javascript"> var iframeDoc; if (window.frames && window.frames.iframeId && window.frames.iframeId.document) {window.frames.iframeId.document.body.innerHTML = "<h1> test </h1>"; } </script> </body> </html>
nekno
1
window.frames.iframeId.documentest indéfini pour moi. (Ubuntu 13.04, Chrome)
Ionică Bizău
2

Chalkey est correct, vous devez utiliser l'attribut src pour spécifier la page à contenir dans l'iframe. À condition que vous le fassiez et que le document de 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 le mettre en alerte.

Graham Clark
la source
1

Pour obtenir le contenu du corps de javascript, j'ai essayé le code suivant:

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

var frameContent = frameObj.contentWindow.document.body.innerHTML;

où "id_description_iframe" est l'identifiant de votre iframe. Ce code fonctionne bien pour moi.

sunakshi
la source
2
Veuillez toujours mettre votre réponse en contexte au lieu de simplement coller du code. Voir ici pour plus de détails.
gehbiszumeis
1
Les réponses au code uniquement sont considérées comme de mauvaise qualité: assurez-vous de fournir une explication de ce que fait votre code et de la manière dont il résout le problème. Cela aidera le demandeur et les futurs lecteurs si vous pouvez ajouter plus d'informations dans votre message. Voir aussi Expliquer les réponses entièrement basées sur le code: meta.stackexchange.com/questions/114762/…
borchvm