通过innerHTML动态插入的script无法执行的解决方法

很多时候,需要通过innerHTML动态插入javascript代码到指定的div中,或者通过ajax请求回来的内容里面包含javascript代码,然后把该代码插入指定的div中,但是插入后的script却无法执行。

原因:直接通过innerHTML动态嵌入的script,浏览器会当做普通的文本,不会当作SCRIPT节点维护到DOM里面,所以调用的时候找不到。

解决方法:用innerHTML嵌入以后,通过DOM从myDIV中取出嵌入的script节点,然后新创建一个script节点,并把嵌入的script里面的内容也赋给新创建的script节点,然后把这个新节点追加到页面的head节点中,这样就可以调用到里面的函数了。

比如下面的代码,加上红颜色的内容即可(firefox下测试通过,ie需要再调整一下语法)

<html>

<head></head>

<body>

<buttononclick="getContent();"name="getContent"id="getContent">GetContent</button>

<p></p>

<divid="myDiv"></div>

<p></p>

<scripttype="text/javascript">

functiongetContent(){

varstr="addedcontent\<br\>"+

"\<inputname=\'myname\'id=\'myname\'\>"+

"\<buttononclick=\'getName()\;\'name=\'getName\'id=\'getName\'\>GetName\<\/button\>"+

"\<scripttype=\'text\/javascript\'\>"+

"functiongetName(){"+

"alert(\'ok\')\;"+

"document.getElementById(\'myname\').value=\'Bill\'\;"+

"}"+

"\<\/script\>";

document.getElementById("myDiv").innerHTML=str;

varmyDivScript=document.getElementById("myDiv").getElementsByTagName("SCRIPT").item(0);

varnewScript=document.createElement("SCRIPT");

newScript.innerHTML=myDivScript.innerHTML;

document.getElementsByTagName("HEAD").item(0).appendChild(newScript);

}

</script>

</body>

</html>

相关推荐