articlescibler le document d’une iframe en javascript
Posté le mercredi 24 janvier 2007 à 7 h 06, Read it in english with GoogleVous 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 :
span class="st0">"myiframe"
maintenant votre variable myf cible sur le window.document de l’iframe.
maintenant votre variable myf cible sur le window.document de l’iframe.
un petit rapel : pour cibler la page à partir de l’iframe, simple :
Ces exemples marchent pour firefox, opera, IE >= 5.5.
Également dans les catégories javascript, programmation.
Vous pouvez 
suivre les nouveaux commentaires.
Vous pouvez ajouter un commentaire, ou faire un trackback sur votre site.
suivre les nouveaux commentaires.
Vous pouvez ajouter un commentaire, ou faire un trackback sur votre site.
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?
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é…
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.
Merci beaucoup pour ces petites astuces 😉
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()
Merci, ca vient de me servir !
@+
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 🙂
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).
euh j’ai vu un exemple d’upload fait en js-php avec barre de progression… faudrait que je retrouve ca!
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 !
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 🙂
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…
Exactement se dont j’avais besoin 🙂
Parfait cet article, merci beaucoup 🙂
merçiii bcp