Discussion :

[jpbigot]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[danielhagnoul]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 );
});

[jpbigot]

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

[Eric2a]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[jpbigot]

Ca marche... presque !

Voila le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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