解决ajax返回innerHTML中javascript不能运行问题

 在实际应用的过程中，我们经常会遇到使用ajax返回某一个网页的内容到模版页面的某一个<div>标签中显示的操作。如果返回的值仅仅是文本类数据不会影响模版页面的功能，但是如果返回的数据包括javascript，那么直接innerHTML到模版页的这段脚本是不会被运行的。原因在于浏览器只在显示模版时才解析javascript，而使用ajax返回的js是被后期倒入的并没有被解析，所以调用的时候找不到对应的function()。

想要解决这个问题，最基本的方法就是需要让浏览器可以同时解析<div>标签中的js。如果单适用IE浏览器，最简单的方式就是在<div>中的<script>标签中添加属性defer，它可以通知IE该脚本需要异步解析。但是令人头痛的是Firfox的标准总是和IE有着各种各样的不同，由于FF不支持defer所以使得开发者不得不另辟蹊径来解决这个问题。

实际上，我们可以在ajax返回数据并innerHTML到模版之前先把<div>中的javascript取出并写到模版页面的<head>中让浏览器解析。这样就相当于在打开模版页面的同时加载了所有<div>标签需要的javascript。奇怪的是这些脚本必须添加在<head>标签中FF才能有效，如果有人知道原因希望可以指点偶一下。

实现方法举例：

function get_div_content(divid)...{
        
        var xmlHttp = GetXmlHttpObject();
        var url = "http://" + document.location.host + "/divpage.jsp?id="+divid+"&random="+Math.random();
        var div_content_id = "drag_content_"+divid;
        var xmlHttp=GetXmlHttpObject();
            if (xmlHttp==null)
            ...{
                alert ("AJAX初期化失敗!");
                return;
            }
            xmlHttp.onreadystatechange=function()...{
               
                if(xmlHttp.readyState < 4)...{
                    document.getElementById(div_content_id).innerHTML="Loading...";
                }    
                if(xmlHttp.readyState==4)...{
                    //用正则表达式匹配ajax返回的text中是否有onload,如果存在则取出内容。 
                      var reg_onload = /<body onLoad="([^<]*)">/;
                      var match_onload=xmlHttp.responseText.match(reg_onload);            
                    //用正则表达式匹配ajax返回的text中是否有<script>，如果存在则取出标签内部的内容。       
                    var reg = /<script[^>]*>([sS]*)</script>/;
                    var match=xmlHttp.responseText.match(reg);
                    var MyScript="";
                    if(match!=null)...{
                        MyScript=match[1];
                        var script=document.createElement("script");//在模版页创建新的<script>标签
                        script.text=MyScript;//给新的script标签赋值
                        document.getElementsByTagName("head")[0].appendChild(script);//把该标签加入<head>
                        }
                    var Html=xmlHttp.responseText.replace(reg,"");//将剩下的text祛除<script>部分，插入模版页
                    document.getElementById(div_content_id).innerHTML=Html;
                       if(match_onload!=null)...{
                          eval(match_onload[1]);//如果存在onload方法，则调用；
                      }
                   }
            }
            xmlHttp.open("GET",url,true);
            xmlHttp.send(null);
    }

test.html

<table>
    <script type="text/javascript" defer="defer">...
     function test()...{alert('测试下，用ajax的话，这段代码也会执行的！');}
    </script>
    <tbody>
       <tr>
          <td><input onclick="test()" value="click me" type="button"></td>
       </tr>
     </tbody>
</table>