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 :