Accueil > > > POURQUOI MES SCRIPTS AJOUTÉS DYNAMIQUEMENT (AJAX, XSLT, ...) AVEC .INNERHTML NE MARCHENT-ILS PAS ?
POURQUOI MES SCRIPTS AJOUTÉS DYNAMIQUEMENT (AJAX, XSLT, ...) AVEC .INNERHTML NE MARCHENT-ILS PAS ?
Information sur la source
Description
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
- // 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;
- }
// 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>"');
Historique
- 12 avril 2007 20:48:12 :
- Corrige le problème de la contrainte n° 1 !
- 13 avril 2007 18:50:29 :
- Correction d'un bug qui faisait mal fonctionner le script sous IE
- 13 avril 2007 18:54:51 :
- Exemple d'utilisation
- 01 juillet 2008 21:23:05 :
- Voir commentaires
Sources du même auteur
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
Bug de Javascript ? InnerHTML [ par DuncanIdaho ]
Bonjour; J'ai cherché un bon moment, sur Internet, en créant quelques fonctions... Au final, je n'arrive pas à comprendre mon problème, ou en tout
JavaScript : Utiliser InnerHTML pour changer le contenu d'une balise [ par jeanMOULIN54 ]
Bonjour à tous, voilà j'ai utilisé un script trouvé sur le site http://www.journaldunet.com/developpeur/tutoriel/dht/040512-javascript-innerhtml-l
Stage bidon, aucune connaissance. Besoin d'aide :< [ par Creature_Funebre ]
Bonjour, J'ai poste ici il y a quelques jours pour un projet de stage. Je me devais de faire un script VBScript inclut dans une page web, ce qui perme
Stage bidon, aucune connaissance. Besoin d'aide :< [ par Creature_Funebre ]
Bonjour, J'ai poste ici il y a quelques jours pour un projet de stage. Je me devais de faire un script VBScript inclut dans une page web, ce qui perme
Effacer tag script [ par cucrapock ]
Bonjour à tous,je réalise un petit server control avec une partie javascript côté client. Cette dernière créée dynamiquement des tag <script> vi
javascript [ par nicodu94 ]
Bonjours a tous,Je suis débutant en language web. J'ai un peu étudier html css, et je suis bloqué pour apprendre javascript.Dans dreamweaver j'arrive
Prolbème javascript et firefox [ par coty2 ]
Bonsoir à tous!j'ai un petit souci avec un javascript que j'ai confectionné.. ilest un peu beaucoup bancale.. mais bon! Donc explication! sous IE pas
Internet explorer et la recupération de function javascript [ par banbanfr ]
Bonjour à tous,Voilà j'ai un petit problème existentiel. lolJe bosse sur un projet qui est tout en AJAX et drag n drop jusque là tout va bien.Mon prog
problème javascript - XML [ par iraho ]
Bonjour, j'ai un souci avec pour faire du xml dynamique avec javascript et j'aurais besoin d'aide. En fait, j'ai code associant xml, xslt et javascrip
ajax et php [ par tales ]
Bonjour,J'utilise le script ajax suivant :Code : JavaScript 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 1
|
Derniers Blogs
SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOSSESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc
Durant les techdays, j'ai eu le plaisir d'animer une session sur Silverlight 5 et la 3D avec Simon Ferquel. Comme promis, voici nos slides et mes démos (celles avec le viper BSG) ici et là. Pour mémoire, les démos utilisent toutes le viper BSG...
Cliquez pour lire la suite de l'article par Groc [TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier
Suite à la session que j'ai présenté sur WebMatrix 2, vous pouvez trouver les slides ici, ainsi que les démos en packages nuget : démos1 et démos2 J'en profite pour remercier chaleureusement tous ceux qui sont venus très nombreux à cette sess...
Cliquez pour lire la suite de l'article par gpommier [SHAREPOINT] LES SESSIONS TECHDAYS 2012.[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet
Voici donc pour ceux qui n'ont pas pu venir, ou ceux qui n'ont pas pu toutes les suivre la liste des sessions SharePoint aux TechDays 2012, que je mettrais à jour dès que les liens des vidéo seront disponibles. Ou ici : http...
Cliquez pour lire la suite de l'article par Patrick Guimonet TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice
Speaker: Bernard Ourghanlian Cette session est comme chaque jour transmise en live par BrainSonic, et j'ai donc suivi cette troisième pleinière par ce moyen sur mon iPad . Elle est dédiée comme chaque année à la mise en perspective de l'é...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE !MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko
Hier durant une session dédiée aux Techdays 2012, j'ai eu le plaisir d'annoncer la sortie de la Béta 2 de Mishra Reader. C'est quoi ? Pour les utilisateurs, c'est une vraie expérience de lecture de flux RSS sur Windows. Rien à voir avec les produit...
Cliquez pour lire la suite de l'article par Vko
Logiciels
Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning
|