Comment faire référence à l'objet de document d'un <iframe> de la page parent, en utilisant jQuery?

J'essaie d'accéder à l'objet document d'une page qui vit dans un <iframe> de la page hôte. En d'autres termes, j'ai une page qui comporte un <iframe> et je veux utiliser jQuery sur cette page (la page parent) pour accéder à l'objet de document de <iframe>.

Plus précisément, j'essaie de trouver la hauteur du document <iframe> d une fois que son contenu est rendu (onload) afin que je puisse redimensionner le <iframe> de la page parent pour correspondre à la hauteur du <iframe> 's Contenu exactement.

Si c'est important, ce <iframe> est créé sur la page hôte en utilisant JavaScript et se trouve dans le même domaine que la page parentale. J'utilise déjà ce type de code:

$('iframe').contents().find('body').append('<p>content</p>'); 

Pour remplir le <iframe> avec le contenu, mais je ne connais pas la syntaxe exacte pour obtenir l'objet de document <iframe>.

Pour une raison quelconque, je trouve de nombreuses façons d'accéder à l'objet de document du parent dans un <iframe> (le plus avec JavaScript), mais pas l'inverse.

Merci d'avance pour votre aide!

Avez-vous attendu que l'iframe soit chargé aussi?

Quoi qu'il en soit, le code suivant fonctionne dans FF3.5, Chrome 3, IE6, IE7, IE8.
Demo hébergée: http://jsbin.com/amequ (éditable via http://jsbin.com/amequ/edit )

 <iframe src="blank.htm" ></iframe> <script> var $iframe = $('iframe'); /*** In addition to waiting for the parent document to load we must wait for the document inside the iframe to load as well. ***/ $iframe.load(function(){ var $iframeBody = $iframe.contents().find('body'); alert($iframeBody.height()); /*** IE6 does not like it when you try an insert an element that is not made in the target context. Make sure we create the element with the context of the iframe's document. ***/ var $newDiv = $('<div/>', $iframeBody.get(0).ownerDocument); $newDiv.css('height', 2000); $iframeBody.empty().append($newDiv); alert($iframeBody.height()); }); </script> 

Je devais le faire dans un projet récent, et j'ai utilisé ceci:

 <iframe src="http://domain.com" width="100%" border="0" frameborder="0" id="newIframe" onload="$(this).css({height:this.contentWindow ? this.contentWindow.document.body.scrollHeight + (20) : this.contentDocument.body.scrollHeight + (20)});" style="border:none;overflow:hidden;"> </iframe> 

Bien que j'ai la fonction inline (qui a un sens dans mon projet, comme l'iframe est généré via PHP). Si vous ajoutez l'iframe via javascript, ce serait quelque chose comme

 $("#container").append('<iframe src="http://domain.com" width="100%" border="0" frameborder="0" id="newIframe" style="border:none;overflow:hidden;"></iframe>'); $("#newIframe").load(function(){ var _this=$("this")[0]; $(this).css({ height: _this.contentWindow ? _this.contentWindow.document.body.scrollHeight + (20) : _this.contentDocument.body.scrollHeight + (20)}); }); //contentWindow.document.body is for IE //contentDocument.body is for everything else 
 $('iframe').contents().get(0) 

ou

 $('iframe').contents()[0] 

Renverra le document du premier iframe sur la page. Rappelez-vous que les objets jQuery sont des tableaux des éléments DOM correspondants

Il existe plusieurs façons d'accéder à l'iframe:

Par exemple, nous avons cette page HTML:

  <Iframe name = "my_frame_name" id = "my_frame_id"> 

Et JS:

  Frames [0] == frames ['my_frame_name'] == document.getElementById ('my_frame_id'). ContentWindow // true 

Si votre tag iframe n'a pas d'attribut src ou créé dynamiquement avec javascript ou jquery, vous pouvez utiliser cet extrait de code pour se référer au document d'iframe et manipuler en utilisant jquery:

 //in your html file <iframe id="myframe"></iframe> //your js var doc = $ ( '#myframe' )[0].contentWindow.document ; doc.open () ; doc.write ( "<div id='init'></div>" ) ; doc.close () ; var $myFrameDocument = $ ( '#myframe' ).contents ().find ( '#init' ).parent () ; 

Maintenant, vous pouvez accéder à dom et ajouter un html à votre iframe:

  $myFrameDocument.html ( '<!doctype html><html><head></head><body></body></html>' );