onClick et execCommand incompatibles sous Internet ExplorerRésolu

Question

Bonjour, Je travaille sur un editeur Javascript depuis quelques temps et je me casse les dents pour le rendre compatible avec Internet Explorer. En effet, j'ai programmé une fonction qui utilise la fonction execCommand sur un iframe et lorsque je l'appelle avec un onclick sur une liste (

) sous Mozilla -> sa fonctionne mais sous Internet Explorer -> sa ne fonctionne pas. J'ai essayé de remplacer le onclick par onmouseover et la sa fonctionne pour les deux navigateurs ! Mais moi, ce que je veut, c'est que la fonction soit exécutée lorsque l'on clique. Sinon, j'ai essayé de remplacer dans le onclick ma fonction par l'appel d'une fenetre alert, et sa fonctionne ! lol J'en déduit donc : que "execCommand" n'est pas compatible avec "onClick" sous Internet Explorer (j'ai testé que sur la version 7 !). Et j'en appel à une solution ! Merci.

Shinji49 · Accepted Answer

Bonjour,

Après avoir regardé la construction de certains scripts. Je me suis rendu compte que sous Internet Explorer 7, le execCommand dans le onClick placé sur un élément de liste ou une cellule de tableau ne fonctionnait pas !

Au contraire, à travers un bouton ou même un lien, cela fonctionne.

Ta solution Bultez n'y change rien car le problème n'est pas là !

Bref, j'utilise la balise HTML de lien "A" et sa marche très bien. Le plus dur sera la cellule de tableau.

Je pense enfin que ce phénomène est connue, que je ne doit pas regarder du bon coté.

Merci quand même. Au revoir.

cs_bultez · Answer

Bonjour,

>>j'en déduit donc : que "execCommand" n'est pas compatible avec "onClick"
sous Internet
>> Explorer (j'ai testé que sur la version 7 !). Et j'en
appel à une solution !

très très mauvaise déduction !
( les bugs n'existent pas.... sur aucun navigateur ! )
si ça ne fonctionne pas, c'est que celui qui code fait une erreur... toujours !!!!

    exemple qui fonctionne avec ie,ff, opera, safari.....

<hr />                Cordialement             Bul         [mon Site]     [M'écrire]

cs_bultez · Answer

réponse au "message privé" :

pourquoi voudrais-tu être aidé  en privé ?

le forum est là pour ça :

plus d'intervenants, plus de compétences,

plus de chances de réponses correctes...

je n'utilise pas msn, je pense que je

n'utiliserai jamais, on peut me joindre

facilement [ voir ma signature ]

mais le forum, c'est le mieux !

@+

<hr />                Cordialement             Bul         [mon Site]     [M'écrire]

nicomilville · Answer

Salut,

lol, que dire de plus, a part bultez++ !!!

a++

Si la réponse vous convient, pensez : Réponse acceptée !

Shinji49 · Answer

Re bonjour, Bon voici le code ! Code javascript du fichier EditeurCod.js : // JavaScript Document /* insertAdjacentHTML() - Thor Larholm ************************************* * insertAdjacent%() est une méthode supportée par seulement IE. ***************************************************************************/ if(typeof HTMLElement!= "undefined" && !HTMLElement.prototype.insertAdjacentElement){ HTMLElement.prototype.insertAdjacentElement = function(where,parsedNode){ switch(where){ case 'beforeBegin': this.parentNode.insertBefore(parsedNode,this) break; case 'afterBegin': this.insertBefore(parsedNode,this.firstChild); break; case 'beforeEnd': this.appendChild(parsedNode); break; case 'afterEnd': if(this.nextSibling)this.parentNode.insertBefore(parsedNode,this.nextSibling); else this.parentNode.appendChild(parsedNode); break; } } } /******************************************************************************* * EditeurCod *******************************************************************************/ EditeurCod = function(args){ // Appel méthode : initiatilisation. this.iniT(args.id, args.dimX || '600px', args.dimY || '400px', args.police || 0, args.taillePol || 0); } // Méthode : initialisation. EditeurCod.prototype.iniT = function(id,dimX,dimY,police,taillePol){ // Variables. this.id = id; this.dimX = dimX; this.dimY = dimY; this.champ = document.getElementById(this.id); this.contenu = this.champ.value; this.prop = 0; this.policeSel = 0; this.taillePolSel = 0; this.navig = navigator.appName; // Fonctions (TAB). foncTab = new Array(); // ID - Propriété - Titre. foncTab['police'] = ['fontname','Police du texte',1]; // Police. foncTab['taillePol'] = ['fontsize','Taille du texte',1]; // Taille police. this.foncTab = foncTab; // Polices (TAB). var polTab = ['Arial','Calibri','Courier New','Georgia','Sans Serif','Tahoma','Times New Roman','Trebuchet MS','Verdana']; this.polTab = polTab; // Barres (TAB). barTab = new Array(); barTab[0] = ['police','taillePol']; var policeSel =' '; for(var i=0;i < this.polTab.length;i++){ policeSel +='

'+this.polTab[i]+'

'; } policeSel +=' '; this.police = policeSel; var taillePolSel =' '; for(var i=1;i < 8;i++){ taillePolSel +='

Taille '+i+'

'; } taillePolSel +=' '; this.taillePol = taillePolSel; /* Editeur ****************************************************************/ var bar =' '; for(var i = 0;i < barTab.length;i++){ if(i 1 || i 4)bar +=' '; bar +=' '; for(var i2 = 0;i2 < barTab[i].length;i2++){ var valeur = barTab[i][i2]; if(valeur =='police' || valeur =='taillePol')bar +=' '+foncTab[valeur][1]+' [javascript:'+this.id+'.selOuv(\''+valeur+'\'); ]'; else bar +='[javascript:'+this.id+'.commanD(\''+foncTab[valeur][0]+'\',\''+valeur+'\'); ]'; } bar +=' '; } var iFrame ='EditeurCod '; var editeur =' '+ bar + iFrame +' '; this.champ.style.display ='none'; this.champ.insertAdjacentHTML('afterEnd',editeur); /**************************************************************************/ /* iFrame *****************************************************************/ this.iFrame = document.getElementById('ECF'+this.id); this.iFrameCont = this.iFrame.contentWindow.document; this.iFrame.style.width = this.dimX; this.iFrame.style.height = this.dimY; this.iFrameCont.open(); this.iFrameCont.write(this.contenu); this.iFrameCont.close(); this.iFrameCont.designMode ='on'; /**************************************************************************/ } // Méthode : commande. EditeurCod.prototype.commanD = function(cmd,val){ if(cmd =='hilitecolor' && this.navig =='Microsoft Internet Explorer')cmd ='backcolor'; this.iFrame.contentWindow.focus(); this.iFrameCont.execCommand(cmd,false,val); } // Méthode : fermer. EditeurCod.prototype.ferM = function(){ if(this.prop != 0){ if(this.prop =='textCouleur' || this.prop =='textFond')var val ='Couleur'; else var val = this.prop; document.getElementById('ECF'+val).style.display ='none'; if(this.prop !='textCouleur' && this.prop !='textFond')document.getElementById('ECF'+val).innerHTML =''; this.prop = 0; } } // Méthode : selection ouverture. // OK. EditeurCod.prototype.selOuv = function(val){ if(this.prop == val){ this.ferM(); }else{ this.ferM(); document.getElementById('ECF'+val).innerHTML = this[val]; document.getElementById('ECF'+val).style.display ='block'; this.prop = val; } } // Méthode : selection. // OK. EditeurCod.prototype.selSel = function(val){ document.getElementById('ECV'+this.prop).innerHTML = val; this.commanD(this.foncTab[this.prop][0],val); this.ferM(); } Code du fichier test.html : Voila. Donc, lorsque le script est exécuté sous Internet Explorer, il y a le fameux bug dont je parlais. Il est vrai que cela ne vient pas de IE mais d'où vien-il ? Pour voir le bug, tapez du texte dans l'iframe. Sélectionnez le texte tapé puis cliquez sur un des selects et enfin selectionnez une valeur. Vous allez voir que le execCommand n'a pas été appliqué sur votre sélection et que le curseur s'est replacé au début ! De même, si votre curseur est positionné à la fin et que vous n'avez pas fait de sélection. Donc, si quelqu'un sait d'où cela vient, ce serait super ! Merci.

cs_bultez · Answer

comme d'habitude....
dans un 1er temps, refus de montrer son code... on se demande pourquoi....
et dans un 2ème temps : tiens... v'la tout ! et démerde !

1° tu aurais pu faire l'affort de faire l'extrait nécessaire
    et de le poster ici ( M'écrire est inutile ! c'est mieux
    dans ce forum, ça sert à d'autres , et les autres intervenants
    peuvent aussi aider bien plus qu'efficacement !)

2° tu n'as probablement pas fait l'effort non plus d'aller
    voir le lien que je te donnais....
    tu y aurais vu :

    switch (navigator.appName)    
    {    //         ===============================
        case     "Microsoft Internet Explorer":
        //         ===============================
            Fen=window.frames['Saisie'];
            Champ=Fen.document;
            document.getElementById('SiIe').style.display="inline";
            break;
        //               =========
        default:    //     sinon
        //               =========
            Champ=document.getElementById('Saisie').contentDocument;
            Fen=document.getElementById('Saisie').contentWindow;
            break;    
    }
    
    et que l'execCommand est fait sur Cahmp !

    Champ.execCommand("ordre"... )

<hr />                Cordialement             Bul         [mon Site]     [M'écrire]

Shinji49 · Answer

LOL !

Salut,

1° -> il s'agit bien d'un extrait ! lol
2° -> Si si, j'y suis allé, mais quand j'ai vu que j'avais déjà ton script en Local, j'ai pas pensé a regarder le code.

Bref : concernant ton code, j'essaye ce soir et je te dit car la je doit repartir.

Merci.

cs_bultez · Answer

je ne sais pas ce que c'est "un extrait lol" ??? ça veut dire quoi ?
    un "extrait du code" je comprend, tu veux sûrement dire 
        "un extrait où je ne me suis pas emmerdé, où j'ai tout mis" ?    

tout ce que je vois par exemple 
        c'est combien (?) de lignes css totalement inutiles pour le problème ? 
         c'est un .js qu'il faut qu'on intégre (!!!) , avec des fonctions
            qui n'ont rien à voir avec le souci,
         ...
>> j'ai pas pensé a regarder le code.
    ah ben ! je t'ai pourtant dis qu'il fonctionnait !
    et tu ne penses pas à regarder ????    c'est se moquer du monde.

<hr />                Cordialement             Bul         [mon Site]     [M'écrire]

Shinji49 · Answer

Salut, Tu est borné ? lol -> Je viens même de me rendre compte que j'avais tellement coupé qu'il manquait une fonction pour que le script fonctionne ! Pour le CSS, l'idée est de pouvoir essayer à l'aise ! Car sans le CSS, sa aurait été le fouillis sur la page et là j’aurais eu comme réflexion -> « tu n’aurais pas pu rendre sa plus présentable ? » De plus, sa prend pas plus de temps de sélectionner le CSS avec le reste du code HTML. Concernant ton script : je pensais que tu voulais que je le télécharge et que je me casse ! Vraiment, sur ce coups la, je trouve la critique facile. Mais bon, laissons de coté ce que je pense. J’ai adapté ton code, et je suis arrivé à une situation que j’ai déjà rencontrée ! Sous Internet Explorer, la frame n’est plus éditable et n’est plus manipulable. Alors que lorsque je remets mon « getElementById » sa marche. Encore une chose d’ambigu que je n’arrive pas à comprendre. V'la tout ! Le code présenté ci dessous à été modifié en fonction de l'aide apporté. J'ai de plus rajouté un bout de code important. (En ROUGE !) // JavaScript Document /* insertAdjacentHTML() - Thor Larholm ************************************* * insertAdjacent%() est une méthode supportée par seulement IE. ***************************************************************************/ if(typeof HTMLElement!= "undefined" && !HTMLElement.prototype.insertAdjacentElement){ HTMLElement.prototype.insertAdjacentElement = function(where,parsedNode){ switch(where){ case 'beforeBegin': this.parentNode.insertBefore(parsedNode,this) break; case 'afterBegin': this.insertBefore(parsedNode,this.firstChild); break; case 'beforeEnd': this.appendChild(parsedNode); break; case 'afterEnd': if(this.nextSibling)this.parentNode.insertBefore(parsedNode,this.nextSibling); else this.parentNode.appendChild(parsedNode); break; } } HTMLElement.prototype.insertAdjacentHTML = function(where,htmlStr){ var r = this.ownerDocument.createRange(); r.setStartBefore(this); var parsedHTML = r.createContextualFragment(htmlStr); this.insertAdjacentElement(where,parsedHTML) } HTMLElement.prototype.insertAdjacentText = function(where,txtStr){ var parsedText = document.createTextNode(txtStr) this.insertAdjacentElement(where,parsedText) } } /******************************************************************************* * EditeurCod *******************************************************************************/ EditeurCod = function(args){ // Appel méthode : initiatilisation. this.iniT(args.id, args.dimX || '600px', args.dimY || '400px', args.police || 0, args.taillePol || 0); } // Méthode : initialisation. EditeurCod.prototype.iniT = function(id,dimX,dimY,police,taillePol){ // Variables. this.id = id; this.dimX = dimX; this.dimY = dimY; this.champ = document.getElementById(this.id); this.contenu = this.champ.value; this.prop = 0; this.policeSel = 0; this.taillePolSel = 0; this.navig = navigator.appName; // Fonctions (TAB). foncTab = new Array(); // ID - Propriété - Titre. foncTab['police'] = ['fontname','Police du texte',1]; // Police. foncTab['taillePol'] = ['fontsize','Taille du texte',1]; // Taille police. this.foncTab = foncTab; // Polices (TAB). var polTab = ['Arial','Calibri','Courier New','Georgia','Sans Serif','Tahoma','Times New Roman','Trebuchet MS','Verdana']; this.polTab = polTab; // Barres (TAB). barTab = new Array(); barTab[0] = ['police','taillePol']; var policeSel =' '; for(var i=0;i < this.polTab.length;i++){ policeSel +='

'+this.polTab[i]+'

'; } policeSel +=' '; this.police = policeSel; var taillePolSel =' '; for(var i=1;i < 8;i++){ taillePolSel +='

Taille '+i+'

'; } taillePolSel +=' '; this.taillePol = taillePolSel; /* Editeur ****************************************************************/ var bar =' '; for(var i = 0;i < barTab.length;i++){ if(i 1 || i 4)bar +=' '; bar +=' '; for(var i2 = 0;i2 < barTab[i].length;i2++){ var valeur = barTab[i][i2]; if(valeur =='police' || valeur =='taillePol')bar +=' '+foncTab[valeur][1]+' [javascript:'+this.id+'.selOuv(\''+valeur+'\'); ]'; else bar +='[javascript:'+this.id+'.commanD(\''+foncTab[valeur][0]+'\',\''+valeur+'\'); ]'; } bar +=' '; } var iFrame ='EditeurCod '; var editeur =' '+ bar + iFrame +' '; this.champ.style.display ='none'; this.champ.insertAdjacentHTML('afterEnd',editeur); /**************************************************************************/ /* iFrame *****************************************************************/ if(this.navig =='Microsoft Internet Explorer'){ this.iFrame = window.frames['ECF'+this.id]; this.iFrameCont = this.iFrame.document; }else{ this.iFrame = document.getElementById('ECF'+this.id); this.iFrameCont = this.iFrame.contentDocument; } /*this.iFrame = document.getElementById('ECF'+this.id); this.iFrameCont = this.iFrame.contentWindow.document;*/ this.iFrame.style.width = this.dimX; this.iFrame.style.height = this.dimY; this.iFrameCont.open(); this.iFrameCont.write(this.contenu); this.iFrameCont.close(); this.iFrameCont.designMode ='on'; /**************************************************************************/ } // Méthode : commande. EditeurCod.prototype.commanD = function(cmd,val){ if(cmd =='hilitecolor' && this.navig =='Microsoft Internet Explorer')cmd ='backcolor'; this.iFrame.contentWindow.focus(); this.iFrameCont.execCommand(cmd,false,val); } // Méthode : fermer. EditeurCod.prototype.ferM = function(){ if(this.prop != 0){ if(this.prop =='textCouleur' || this.prop =='textFond')var val ='Couleur'; else var val = this.prop; document.getElementById('ECF'+val).style.display ='none'; if(this.prop !='textCouleur' && this.prop !='textFond')document.getElementById('ECF'+val).innerHTML =''; this.prop = 0; } } // Méthode : selection ouverture. // OK. EditeurCod.prototype.selOuv = function(val){ if(this.prop == val){ this.ferM(); }else{ this.ferM(); document.getElementById('ECF'+val).innerHTML = this[val]; document.getElementById('ECF'+val).style.display ='block'; this.prop = val; } } // Méthode : selection. // OK. EditeurCod.prototype.selSel = function(val){ document.getElementById('ECV'+this.prop).innerHTML = val; this.commanD(this.foncTab[this.prop][0],val); this.ferM(); } Au revoir.

cs_bultez · Answer

>> Tu est borné ?
    pardon ?
<hr />                Cordialement             Bul         [mon Site]     [M'écrire]

Shinji49 · Answer

LOL Jusqu'au bout !

OnClick et execCommand incompatibles sous Internet Explorer

11 réponses

Votre réponse

Discussions similaires