执行AJAX返回HTML片段中的JavaScript脚本

如果AJAX加载的数据是一个HTML片段，而且这个HTML片段还包含脚本<script>块，那么在你把这数据 xmlHttp.responseText用innerHTML方法插入到当前文档一个元素中，你会发现AJAX加载回来的脚本根本没有执行。这是 AJAX开发中很常见的问题，如果你不是一直在用JavaScript框架做开发，相信你早就发现这个问题了。

 

来源：http://www.iteye.com/problems/2619

 

解决方法：

 

ajax.php

 

<?php

// php 代码

?>

<script src="a.js" type="text/script">  

/* 

或者 

<script>
      alert('success.');
</script>

*/

<div>
 <!-- html 代码-->
</div>

 

 

ajax.js

 

    if (xmlHttp.readyState==4)
    {
         var html = xmlHttp.responseText;
         var hd = document.getElementsByTagName("head")[0];
         var re = /(?:<script([^>]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig;
         var srcRe = /\ssrc=([\'\"])(.*?)\1/i;
         var typeRe = /\stype=([\'\"])(.*?)\1/i;
         var match;
         while(match = re.exec(html)){
              var attrs = match[1];
              var srcMatch = attrs ? attrs.match(srcRe) : false;
              if(srcMatch && srcMatch[2]){
                   var s = document.createElement("script");
                   s.src = srcMatch[2];
                   var typeMatch = attrs.match(typeRe);
                   if(typeMatch && typeMatch[2]){
                        s.type = typeMatch[2];
                   }
                   hd.appendChild(s);
               }else if(match[2] && match[2].length > 0){
                   if(window.execScript) {
                           window.execScript(match[2]);
                   } else {
                           window.eval(match[2]);
                   }
              }
         }

        document.getElementById("area").innerHTML = xmlHttp.responseText; 
 }

 

太感谢了！