on click sur un élément dans un iFrame. Quelque chose m'échappe !

Version imprimable

Bonjour,

Help... Je tourne en rond sur un problème.. et pourtant, c'a devrait marcher !

J'affiche un iFrame dans ma page.. je n'ai pas le choix...
Mon php envoie au javascript mon iFrame encadré par un <div> :'<div class="container-edit-image"><iframe id="imgeditorframe" ...... ></iframe></div>.

C'a fonctionne et ma page s'affiche, la voici (simplifiée) :
Code:

1 2 3 4 5 6 7 8 <div style="position: relative;" id="app-attachment-upload-container"> <div class="container-edit-image"> <iframe id="imgeditorframe" src="..... " > <div class="main-actions"> <input class="btn-main closeEditAttachment" id="btnsave" name="btnsave" value="Enregistrer et fermer" type="button"></div> </iframe> </div> </div>
Je veux atteindre le bouton "btnsave" à l'intérieur de l'iFrame..
en principe c'est :

Code:

document.getElementById('#imgeditorframe').contentWindow.jQuery('.main-actions').on('click', '#btnsave', this.closeEditAttachment );

ou

Code:

document.getElementById('#imgeditorframe').contentWindow.on('click', '#btnsave', this.closeEditAttachment );

J'ai essayé de sélectionner avec iframe , imgeditorframe, 'iframe[name=imgeditorframe, etc... rien n'y fait.. comme toutes sortes d'autres tentatives...

J'ai placé des marqueurs dans mon javascript :
Code:

1 2 3 4 jQuery('#app-attachment-upload-container').append('<b>--editeur--</b>').append(ret.html) ; // affiche bien mon marqueur --editeur--, puis mon iframe (qui est dans ret.html).. jQuery('.container-edit-image').append('<b>--editeur1--</b>') ; // affiche bien mon marqueur --editeur1-- dans le div où jQuery('#imgeditorframe').contentWindow.jQuery('main-actions').append('<b>--editeur2--</b>') ; // rien ne se passe !!! document.getElementById('#imgeditorframe').append('<b>--editeur3--</b>') ; // rien non plus...
Comment voir ce qu'il y a dans document.getElementById('iframe[name=imgeditorframe]').contentWindow ?
si je fais : var essai = document.getElementById('#imgeditorframe') ; le débogueur de Mozilla me dit que essai est "Null" !

J'ai dû louper une marche... Merci d'avance pour toute aide bienvenue !!

JP

Il ne faut pas mélanger le Vanilla JS et le jQuery.

Code:

1
2
3
4
5
6
7
8
9
var jObjBtnSave = $( "#imgeditorframe" ).contents().find( "#btnsave" );
 
// ex 1
jObjBtnSave.css({ "color" : "red" });
 
// ex 2
jObjBtnSave.on( "click", function( e ){
  console.log( e.type, e.target );
});

25/12/2015, 21h03
jpbigot

Génial ! merci

Bonsoir Daniel,

Effectivement, il y a un piège..
Si je comprends bien, contentWindow, c'est du Vanilia, et content() du jQuery !!
Je n'ai pas réessayé avec getElementById, mais c'est aussi du Vanilia..

Donc, quand on mélange du Vanilia et du jQuery, parfois ç'a passe, parfois ç'a casse !

Autre surprise... $() ne marche pas ... jQuery() est ok. Mais ç'a je l'avais repéré..

Encore merci

JP
25/12/2015, 21h41
Eric2a
Citation:

Envoyé par jpbigot

Si je comprends bien, contentWindow, c'est du Vanilia...
Je n'ai pas réessayé avec getElementById, mais c'est aussi du Vanilia

C'est du Javascript !
Code:

1 2 var doc=document.getElementById ("imgeditorframe").contentWindow.document; doc.getElementById("btnsave").onclick=function(){this.closeEditAttachment};

les emm. volent en escadrilles ! comment attendre la fin de l'affichage d'un append() ?

Ca marche... presque !

Voila le code :
Code:

1 2 3 jQuery('#app-attachment-upload-container').append(ret.html) ; // mon iframe s'affiche jQuery( "#imgeditorframe" ).contents().find( "#btnsave" ).on( "click", function(){ jQuery('#app-attachment-upload-container').hide() });
Il ne marche pas, sauf quand je mets un point d'arrêt sur la 2e ligne !
Le débugueur s'arrête sur la ligne, je passe, et le script s'exécute jusqu'au bout...
Je clique sur le bouton #btnsave, le débugueur s'arrette à nouveau sur la ligne, je passe, et là ok, mon instruction hide() fonctionne !

Est-ce parce que le append(ret.html) n'a pas eu le temps de charger ?
Comment fonctionne javascript ? Est-ce qu'il attend de finir une instruction append() avant de passer à la suite ?
J'ai essayé en mettant mon instruction append() dans une fonction, c'est idem...

JP

25/12/2015, 22h56
Eric2a

Je ne connais pas JQuery (et aucune autre bibliothèque d'ailleurs), mais le paramètre de la méthode append ne devrait-il pas être entouré de guillemets ou apostrophes ?

Code:

jQuery('#app-attachment-upload-container').append('ret.html');

car il s'agit d'une chaine de caractères
25/12/2015, 23h05
danielhagnoul

Citation:

Envoyé par Eric2a

Je ne connais pas JQuery (et aucune autre bibliothèque d'ailleurs), mais le paramètre de la méthode append ne devrait-il pas être entouré de guillemets ou apostrophes ?

Code:

jQuery('#app-attachment-upload-container').append('ret.html');

car il s'agit d'une chaine de caractères

Oui !

http://vanilla-js.com/ : Vanilla JS n’est pas un framework mais veut simplement dire “à nu”, c’est du JavaScript sans bibliothèque.
25/12/2015, 23h17
jpbigot

en fait, ret.html est le retour du php qui m'a généré l' iframe que j'affiche.. (c'est un éditeur d'image)

ma chaine contient des doubles " , donc j'encadre ret.html ainsi : append('ret.html')

Cela fonctionne bien, il s'affiche effectivement

Je ne pense pas que le pb vienne de là.

JPB

Bonjour et merci à tous qui m'avez aidés..

Voici l'explication :
Code:

1 2 3 jQuery('#moncontainer').append( '<iframe id="moniframe" src="..... "><input class="monbouton" id="monbouton" type="button">') ; // mon iframe s'affiche, avec un bouton cliquable jQyery() ; // instruction bidon... jQuery( "#moncontainer" ).contents().find( "#monbouton" ).on( "click", function(){ ........ }) ;
Et bien, si le append() est une fonction synchrone, l'analyse du DOM ne l'est pas.
Et donc, si je mets un break point sur mon jQuery() bidon, c'a marche. Sinon, le sélecteur find( "#monbouton" ) ne trouve rien, car il arrive trop tôt !!

Il y a plusieurs solutions. L'une est de faire ainsi :
Code:

1 2 3 $(function() { // Ici, le DOM est entièrement défini });
Pour être franc, je n'ai pas essayé, car j'ai abandonné le logiciel que je voulais intégrer pour un autre mieux... avec d'autres soucis !!!!

Autre piège : le jquery.min.js de Wordpress est en mode "noConflict()". Ce qui veut dire que $ n'est plus un alias de jQuery..
En cas de pb, par exemple avec des codes tiers à intégrer, il faut prendre un autre script jquery, ou le changer dans wordpress.
Toujours vérifier ce que l'on a comme script, et d'où il vient!

A+

JPB