cibler le document d’une iframe en javascript

Posté le mercredi 24 janvier 2007 à 7 h 06, Read it in english with Google

Vous pourrez avoir besoin comme moi de cibler le contenu ainsi que les fonction inclus dans une iframe, comme par exemple pour créer un script avec des upload de fichiers.

Le ciblage de l’Ă©lĂ©ment iframe se fait comme les autres avec l’id ou avec l’attribut name seulement le contenu du document de l’iframe est un peu plus problĂšmatique.

par exemple pour cibler la partie window.document de la page de l’iframe :

<iframe scr="mapage.html" id="myiframe"></iframe>

vous devrez faire :

var myf = document.getElementById("myiframe");
myf = myf.contentWindow.document || myf.contentDocument;

maintenant votre variable myf cible sur le window.document de l’iframe.

un petit rapel : pour cibler la page Ă  partir de l’iframe, simple :

window.parent.document

Ces exemples marchent pour firefox, opera, IE >= 5.5.

15 réponses à “cibler le document d’une iframe en javascript”

  1. belette

    Salut!
    J’ai un soucis au niveau d’une iframe dont les donnĂ©es sont chargĂ©es en ajax par le contentDocument :
    Tous les appels javascript appelĂ©s depuis des Ă©vĂšnements (onclick, onmousover…) ne semblent pas fonctionner correctement : impossible en effet d’appeler depuis ces Ă©vĂšnement une fonction js dĂ©clarĂ©e dans le mĂȘme document (chargĂ©e dans le contexte global pourtant) ni Ă  accĂ©der au document parent Ă  l’iframe.
    par exemple :

    tutu=function() { alert(top.document.title) } est bien déclarée

    tutu(); fonctionne

    clique moi fonctionne

    clique moi ne fonctionne pas

    clique moi ne fonctionne pas

    J’ai passĂ© une partie de l’aprĂ©s midi Ă  chercher, je commence Ă  dĂ©sespĂ©rer… aurais tu une idĂ©e du problĂšme?

  2. belette

    raaaaaa, a chaque fois je me fais avoir, c koi les code pour les supérieur et inférieur?

    script tutu=function() { alert(top.document.title) } /script est bien déclarée

    script tutu(); /script fonctionne

    a onClick=alert(« tutu ») clique moi /a fonctionne

    a onClick=tutu(); clique moi /a ne fonctionne pas

    a onClick=alert(top.document.title) ; clique moi /a ne fonctionne pas

    C’est pas trĂ©s lisible, dĂ©solĂ©…

  3. XoraX

    bon ce qu’il fallait dire c’est que tu chargeais tes donnĂ©s via AJAX et fesait un eval global sur les script inclus dans ces donnĂ©es que tu placais ensuite dans l’iframe.

    Les fonction dĂ©clarĂ© dans le document ne sont pas disponible dans l’ifrale et inversement. Pour cette raison l’eval global doit etre fait Ă  l’aide du eval de l’ifrale et non du document parent si vous voulez que vos fonctions soit disponibles dans l’iframe.

    on utilise donc :
    var myf = document.getElementById(« myiframe »);
    myf = myf.contentWindow.document || myf.contentDocument;
    myf.eval(‘….’);

    et vous devrez refaire un eval global dans le document parent si vous voulez que les fonctions y soient définies aussi.

  4. Capripot

    Merci beaucoup pour ces petites astuces 😉

  5. Capripot

    Une petite prĂ©cision tout de mĂȘme, pour appeler une fonction myFunction() de la page parent d’une iframe sur cette mĂȘme page parent, il suffit de faire parent.myFunction()

  6. FRS-Design

    Merci, ca vient de me servir !

    @+

  7. Hkm

    j’aurai bien une question mais personne n’a Ă©crit depuis un an dans ce sujet ??

    si il y a ame qui vive dans le secteur…
    je cherche a mettre en place un upload de photo avec barre de progression en Ajax / php,
    je suis novice en Ajax et confirmé en php.

    j’ai trouvĂ© plusieurs trucs mais rien qui fait ce que je veux exactement

    de l’aide svp 🙂

  8. XoraX

    normal que tu n’es rien trouvĂ© parce que c’est pas possible uniquement en JS et PHP.

    CotĂ© client l’object XHR ne permet pas d’envoyer des fichiers. Et cotĂ© serveur PHP ne permet pas de savoir oĂč en est un upload de fichier.

    Mais tu peux tout de mĂȘme utiliser flash + php ou encore javascript + perl (en organisant bien tes frames).

  9. Matt

    euh j’ai vu un exemple d’upload fait en js-php avec barre de progression… faudrait que je retrouve ca!

  10. RzB

    Salut,

    Merci pour ce tuto, trĂšs intĂ©ressant vu le nombre de posts confus au sujet des iframes…

    J’essaye de l’appliquer sur une iframe issue d’un site tiers, parce que lorsqu’elle s’affiche dans IE, son fond est blanc, alors que je la voudrais transparente pour laisser apparaĂźtre le dĂ©gradĂ© de fond.

    J’ai :

    <iframe name= »myframe » src= »myframe.html » allowtransparency= »true »></iframe>

    Et :
    var myf = document.getElementById(« frame »);
    myf = myf.contentWindow.document || myf.contentDocument;
    myf.body.style.backgroundColor = « transparent »;

    Mais cela lÚve toujours une erreur Javascript « AccÚs refusé »

    Je prĂ©cise que l’iframe est bien transparente dans Firefox, le problĂšme vient d’IE, oĂč il est indispensable pour permettre la transparence d’une iframe de prĂ©ciser DANS cette iframe .
    Mais comme je n’ai pas accĂšs Ă  cette iframe qui vient d’un site tiers, je voudrais y accĂ©der via Javascipt 🙂

    Merci de votre aide !

  11. XoraX

    impossible d’accĂ©der aux propriĂ©tĂ©s d’une iframe contenant une page qui n’est pas sur le mĂȘme domaine que le document qui l’entour.

    Ce serait trop facile pour pirater sinon 🙂

  12. Ikonic

    Bonsoir,

    PremiĂšrement, merci pour ces astuces.
    Cependant, voici mon souci :
    Dans ma page, je charge une premiĂšre iframe dans laquelle il y a un formulaire avec un textarea. Dans ce formulaire, un lien permet de crĂ©er dynamiquement un conteneur comprennant lui aussi une iframe. Dans cette derniĂšre iframe, j’ai du code javascript pour insĂ©rer du bbcode dans le textarea de la premiĂšre iframe. Je dois donc placer le focus sur le textarea. Ma premiĂšre mĂ©thode Ă©tait :

    var textarea = parent.uploader.document.getElementById(‘req_message’);

    uploader Ă©tant le nom de l’iframe contenant le formulaire et req_message, l’id du textarea.
    Jusque-lĂ  tout fonctionnait parfaitement.
    Lorsque le visiteur, ne souhaitant finalement pas remplir le formulaire, ferme ce conteneur contenant l’iframe avec le formulaire, le conteneur permettant d’ajouter du bbcode est dynamiquement dĂ©truit par removeNode().
    S’il rĂ©ouvre le conteneur avec l’iframe du formulaire et re-clique sur le lien ouvrant l’iframe pour le bbcode, parent.uploader.document.getElementById(‘req_message’); est dĂ©clarĂ© comme n’ayant pas de propriĂ©tĂ©s.

    j’ai donc souhaitĂ© utiliser ton astuce en faisant :

    var textarea = parent.uploader;
    textarea = textarea.contentWindow.document || textarea.contentDocument;

    Mais de suite, il me dĂ©clare textarea.contentWindow comme n’ayant pas de propriĂ©tĂ©s…

  13. laisham

    Exactement se dont j’avais besoin 🙂

  14. Sun Location vacances

    Parfait cet article, merci beaucoup 🙂

  15. Alonzo

    merçiii bcp

Laissez un commentaire :