Comment puis-je consulter le document d'objet de l'un <iframe> de la page parent, à l'aide de jQuery?

J'essaye 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 a un <iframe> en elle, et je veux utiliser jQuery sur cette page (la page parent) pour accéder à l'objet document de <iframe>.

Plus précisément, je suis en train de trouver la hauteur de la <iframe>d document une fois que son contenu est rendu (onload), de sorte que je peux redimensionner le <iframe> de la page parent à la hauteur de la <iframe>'contenu exactement.

Si c'est important, ce <iframe> est créé sur la page d'hôte à l'aide de JavaScript, et est dans le même domaine que la page parent. J'ai déjà utiliser 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 le <iframe>'objet document.

Pour une raison quelconque, je suis la recherche a beaucoup de façons d'accès du parent de l'objet document dans un <iframe> (la plupart avec du JavaScript), mais pas l'inverse.

Merci d'avance pour toute aide!

OriginalL'auteur Bungle | 2009-10-15

Avez-vous attendu pour l'iframe à charge?

De toute façon, le code suivant fonctionne dans FF3.5, Chrome 3, IE6, IE7, IE8.

Hébergé Démo: http://jsbin.com/amequ (Modifiable 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>

OriginalL'auteur brianpeiris

Si votre balise iframe n'a pas d'attribut src ou créés de manière dynamique avec javascript ou jquery, vous pouvez utiliser ce bout de code pour voir le document de l'iframe et de les manipuler à l'aide de 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 peu de code html à votre iframe:

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

OriginalL'auteur saeed asalisaf

1
```
$('iframe').contents().get(0)
```
ou
```
$('iframe').contents()[0]
```
sera de retour le document de la première iframe sur la page. Rappelez-vous jQuery objets sont des tableaux de la mise en correspondance des éléments du DOM

OriginalL'auteur JeremyWeir
0

Il y a de nombreuses façons peut accéder à iframe:

Par exemple, nous avons cette page HTML:
```
<iframe name="my_frame_name" id="my_frame_id">
```
Et JS:
```
frames[0] == images['my_frame_name'] == document.getElementById ("my_frame_id').contentWindow //true
```
Merci pour la réponse, mais la <iframe> est dans le même domaine que la page parent.
Mon mauvais. J'ai mis à jour la réponse.

OriginalL'auteur NVI

Vous devez vous connecter pour publier un commentaire.