web-dev-qa-db-fra.com

Obtenir le contenu HTML d'un iframe à l'aide de jQuery

J'essaie actuellement de personnaliser un peu OpenCms (CMS open source basé sur Java), qui utilise le FCKEditor incorporé, ce que j'essaie d'accéder à l'aide de js/jQuery. 

J'essaie d'extraire le contenu html de l'iframe, mais je reçois toujours la valeur null en tant que retour .. C'est ce que j'essaie d'extraire le contenu html de l'iframe:

var editFrame = document.getElementById('ta_OpenCmsHtml.LargeNews_1_.Teaser_1_.0___Frame');
alert( $(editFrame).attr('id') );         // returns the correct id
alert( $(editFrame).contents().html() );  // returns null (!!)

En regardant la capture d'écran, je souhaite accéder à la section html "LargeNews1/Teaser", qui contient actuellement les valeurs "Newsline en ..." . Vous pouvez également voir ci-dessous la structure html dans Firebug.

Cependant, $(editFrame).contents().html() renvoie null et je ne peux pas comprendre pourquoi, alors que $(editFrame).attr('id') renvoie le bon identifiant.

Le contenu iframe/FCKEditor se trouve sur le même site/domaine, pas de problème intersite.

enter image description here

Le code HTML de l'iframe est à http://Pastebin.com/hPuM7VUz

Mis à jour:

voici une solution qui fonctionne:

var editArea = document.getElementById('ta_OpenCmsHtml.LargeNews_1_.Teaser_1_.0___Frame').contentWindow.document.getElementById('xEditingArea');                        
$(editArea).find('iframe:first').contents().find('html:first').find('body:first').html('some <b>new</b><br/> value');
javascriptjquerydomiframe
23
Mathias Conradt

.contents (). html () ne fonctionne pas pour obtenir le code html d'un iframe. Vous pouvez faire ce qui suit pour l'obtenir:

$(editFrame).contents().find("html").html();

Cela devrait vous renvoyer tout le code html de l'iframe. Ou vous pouvez utiliser "corps" ou "tête" au lieu de "html" pour obtenir ces sections aussi. 

49
Tim

vous pouvez obtenir le contenu comme 

$('#iframeID').contents().find('#someID').html();

mais frame doit être dans le même domaine, référez-vous http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

7
Hemant Metalia

Je suggère de remplacer la première ligne par:

  var editFrame = $('#ta_OpenCmsHtml.LargeNews_1_.Teaser_1_.0___Frame');

... et la 2ème expression d'alerte avec:

  editFrame.html()

Si, en revanche, vous préférez accomplir la même chose, jQuery (beaucoup plus froid, à mon humble avis) ne peut utiliser que JavaScript:

  var editFrame = document.getElementById('ta_OpenCmsHtml.LargeNews_1_.Teaser_1_.0___Frame');
  alert(editFrame.innerHTML);
2
Nathan

Je pense que FCKEditor a sa propre API voir http://cksource.com/forums/viewtopic.php?f=6&t=8368

1
Dale Burrell

Votre iframe:

<iframe style="width: 100%; height: 100%;" frameborder="0" aria-describedby="cke_88" title="Rich text editor, content" src="" tabindex="-1" allowtransparency="true"/>

Nous pouvons obtenir les données de cette iframe as:

var content=$("iframe").contents().find('body').html();
alert(content);
0
Sudhakar Singajogi