J'ai un script qui insère du contenu dans un élément en utilisant innerHTML
.
Le contenu pourrait par exemple être:
<script type="text/javascript">alert('test');</script>
<strong>test</strong>
Le problème est que le code à l'intérieur de la <script>
balise n'est pas exécuté. Je l'ai googlé un peu mais il n'y avait pas de solutions apparentes. Si j'ai inséré le contenu à l'aide de jQuery, $(element).append(content);
les parties du script ont eval
été injectées dans le DOM.
Quelqu'un a-t-il un extrait de code qui exécute tous les <script>
éléments? Le code jQuery était un peu complexe, donc je ne pouvais pas vraiment comprendre comment cela était fait.
Modifier :
En jetant un œil dans le code jQuery, j'ai réussi à comprendre comment jQuery le fait, ce qui a abouti au code suivant:
Demo:
<div id="element"></div>
<script type="text/javascript">
function insertAndExecute(id, text)
{
domelement = document.getElementById(id);
domelement.innerHTML = text;
var scripts = [];
ret = domelement.childNodes;
for ( var i = 0; ret[i]; i++ ) {
if ( scripts && nodeName( ret[i], "script" ) && (!ret[i].type || ret[i].type.toLowerCase() === "text/javascript") ) {
scripts.push( ret[i].parentNode ? ret[i].parentNode.removeChild( ret[i] ) : ret[i] );
}
}
for(script in scripts)
{
evalScript(scripts[script]);
}
}
function nodeName( elem, name ) {
return elem.nodeName && elem.nodeName.toUpperCase() === name.toUpperCase();
}
function evalScript( elem ) {
data = ( elem.text || elem.textContent || elem.innerHTML || "" );
var head = document.getElementsByTagName("head")[0] || document.documentElement,
script = document.createElement("script");
script.type = "text/javascript";
script.appendChild( document.createTextNode( data ) );
head.insertBefore( script, head.firstChild );
head.removeChild( script );
if ( elem.parentNode ) {
elem.parentNode.removeChild( elem );
}
}
insertAndExecute("element", "<scri"+"pt type='text/javascript'>document.write('This text should appear as well.')</scr"+"ipt><strong>this text should also be inserted.</strong>");
</script>
function testFunction(){ alert('test'); }
au code inséré dans innerHTML, et que j'essaye de l'appeler, cela indique que la fonction n'est pas définie.