Pourquoi mes scripts ajoutés dynamiquement (ajax, xslt, ...) avec .innerhtml ne marchent-ils pas ?

Commenter

Contenu du snippet

Sous IE, les éléments ajoutés par innerHTML ne bénéficient pas du même soutient que les autres éléments de la page...
Les ID ont tendance à être "oublié", les scripts sont toujours escamotés... bref très désagrable...

Voici ici une solution que j'ai développé pour palier le problème...

Il parait que la partie CSS (<style>) ne fonctionne pas, je dois dire que je ne l'ai jamais essayée...

Source / Exemple : 


// setInnerHTML Sécurisé
            function setInnerHTML(divContent, HTML) {
                divContent.innerHTML=HTML; 
                try {
                  var All=divContent.getElementsByTagName("*");
                  for (var i=0; i<All.length; i++) {
                    All[i].id=All[i].getAttribute("id")
                    All[i].name=All[i].getAttribute("name")
                    // Correction pour activer les classes (plus mise à jour selon ce qui est demandé par les commentaires
                    if (!All[i].className) { All[i].className=All[i].getAttribute("class") }
                  }
                } catch (ex) {}
                try {
                  //if (window.external && window.ActiveXObject && window.XMLHttpRequest) { throw ("IE7 : OK"); }
                  var AllScripts=HTML.extractTags("script");
                  var Before = new Array()
                  AllScripts.forEach(function (v) {
                    for (var i=0; i<Before.length; i++) {
                        if (Before[i]==v) { return false; }
                    }
                    Before.push(v)
                    setTimeout(v,0);
                    //var script = document.createElement("script");
                    //script.innerHTML=v;
                    //document.body.appendChild(script);
                  })
                } catch (ex) {}
                try {
                  var AllStyles=HTML.extractTags("style");
                  AllStyles.forEach(function (v) {
                    var s=document.createStyleSheet()
                    s.cssText=v;
                    s.enabled=true;
                  }, true)
                } catch (ex) {}
            }

            // EXTRAIT DE PROTOTYPE ET DE FREMYCOMPANY API FOR PROTOTYPE
             
            String.prototype.extractTags=function(tag) {
                var matchAll = new RegExp('(?:<'+tag+'.*?>)((\n|\r|.)*?)(?:<\/'+tag+'>)', 'img');
                var matchOne = new RegExp('(?:<'+tag+'.*?>)((\n|\r|.)*?)(?:<\/'+tag+'>)', 'im');
                return (this.match(matchAll) || []).map(function(scriptTag) {
                  return (scriptTag.match(matchOne) || ['', ''])[1];
                });
              }
             
            Object.prototype.forEach=function(delegate, ownpropertiesonly) {
                    if (typeof(delegate)=="function") {
                        if (this instanceof Array && typeof(ownpropertiesonly)=="undefined") {
                            ownpropertiesonly=true;
                        }
                        for (key in this) {
                            var ok = (!ownpropertiesonly);
                            if (!ok) {
                                try {
                                    ok=this.hasOwnProperty(key)
                                } catch (ex) {}
                            }
                            if (ok) {
                                try { delegate(this[key], key, this) } catch(e) {
                                    // ...
                                }
                            }
                        }
                    }
                    return false;
                }
             
            Object.prototype.map=function(iterator) {
                var results = [];
                this.forEach(function(value, index) {
                  results.push(iterator(value, index));
                });
                return results;
              }

Conclusion :


Bon après qques corrections, le code fonctionne sans problème !
Utilisation :
setInnerHTML(document.getElementById('ID'), '<script>alert("ok")<\/script><style>body { background-color: royalblue; }<\/style>"');

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (FREMYCOMPANY)