当前位置:首页 > 开发 > Web前端 > HTML > 正文

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

发表于: 2012-11-05   作者:blogzhoubo   来源:转载   浏览次数:
摘要: 很多时候,需要通过innerHTML动态插入javascript代码到指定的div中,或者通过ajax请求回来的内容里面包含javascript代码,然后把该代码插入指定的div中,但是插入后的script却无法执行。 原因:直接通过innerHTML动态嵌入的script,浏览器会当做普通的文本,不会当作SCRIPT节点维护到DOM里面,所以调用的时候找不到。 解决方法:用i
很多时候,需要通过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>
<button onclick="getContent();" name="getContent" id="getContent">Get Content</button>
<p></p>
<div id="myDiv"></div>
<p></p>

<script type="text/javascript">

function getContent() {

var str = "added content \<br\>" + 
"\<input name=\'myname\' id=\'myname\'\>" +
"\<button onclick=\'getName()\;\' name=\'getName\' id=\'getName\'\>Get Name\<\/button\>" +
"\<script type=\'text\/javascript\'\>" +
"function getName() {" +
"alert(\'ok\')\;" +
"document.getElementById(\'myname\').value = \'Bill\'\;" +
"}" +
"\<\/script\>";

   document.getElementById("myDiv").innerHTML=str;
  
   var myDivScript = document.getElementById("myDiv").getElementsByTagName("SCRIPT").item(0);
   var newScript = document.createElement("SCRIPT");
   newScript.innerHTML = myDivScript.innerHTML;
   document.getElementsByTagName("HEAD").item(0).appendChild(newScript);
  
}

</script>
</body>
</html>

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

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

推荐文章
11 innerHTML插入