日期:2014-05-17  浏览次数:20627 次

Ajax中动态执行返回到innerHTML中的js
摘要:

    最近在为CallbackPlus增加一个类似Asp.net ajax的UpdatePanel和CA的Callback一样的容器无刷更新控件,利用innerHtml来更新最终生成html代码,但是其中的js 脚本文件的更新却是相当的麻烦。对于asp.net ajax中的scriptmanager的调用方式比较不满意,所以自己想了个方法进行处理。

动态插入Script:

    首先碰到的问题是,生成回来的html(包含html标记和script脚本)插入到对应的容器的innerHtml中,却发现script不见了。结果发现是返回来的脚本是这样子的<script>...</script>,如果有动态使用document.write 输出脚本到页面的人,可能明白这样子写是会出出错的,一定要把</script>拆开写才可以("</SCRIPT" + ">"),修改过后(代码如下),html的插入正常了。

    <HTML>
    <SCRIPT>
    function insertScript(){
    var sHTML="<input type=button onclick=" + "run()" + " value='Click Me'><BR>";
    var sScript="<SCRIPT>";
    sScript = sScript + "function run(){ alert('Hello from inserted script.') }";
    sScript = sScript + "</SCRIPT" + ">";
    divHtml.innerHTML = sHTML + sScript;
    }
    </SCRIPT>
    <BODY onload="insertScript();">
    <DIV ID="divHtml"></DIV>
    </BODY>
    </HTML>

    但是这样子就存在一个问题了,我需要去替换整个html中的</script>,麻烦。因为容器中的控件都是我们自己开发的,其中关键脚本的输出和html的输出是可以分开写的,所以想到是否分成两部分进行一个更新,一个容器放真正的html,一个容器专门放script,修改代码如下:

    <HTML>
    <SCRIPT>
    function insertScript(){
    var sHTML="<input type=button onclick=" + "run()" + " value='Click Me'><BR>";
    var sScript="<SCRIPT>";
    sScript = sScript + "function run(){ alert('Hello from inserted script.') }";
    sScript = sScript + "</SCRIPT"+">";
    divHtml.innerHTML = sHTML;
    divScript.innerHTML = sScript;
    }
    </SCRIPT>
    <BODY onload="insertScript();">
    <DIV ID="divHtml"></DIV>
    <DIV ID="divScript"></DIV>
    </BODY>
    </HTML>

    结果问题又出来,你会发现你的script又丢了,没有真正插入到divScript容器中。

    经过测试,原来如果插入script到innerHTML的话,单单插入script代码是不行的,一定要在script之前带上html,好比上例中的input,而且不能放在script后面,即一定要是这样子的格式:

    <html>+<script>,而不能是<script>或者<script>+<html>.

    

动态执行Script:

    经过上面的修改,现在的html和script都已经正确更新到dom中了,但是script中定义的方法却没有执行。

    要执行字符串中的脚本,我第一步想到的是使用eval。

    但是目前html和script是混合一起输出的,所以需要分离出要执行的script代码,然后使用eval。

    首先写了个分离脚本的函数:

    function AnalyzeHtml(html,start,end){
    var regexp=new RegExp(start+"((.|\r\n)*?)"+end,"g");
    var strings=html.match(regexp);
    var objs=new Array();
    var regexp2=new RegExp("(^"+start+"|"+end+"$)","g");
    var js;
    if(strings!=null){
    for(var i=0;i<strings.length;i++){
    objs[i] = strings[i].replace(regexp2,'');
    }
    var strScript = objs.join(";").replace(/\\\"/g,"\"").replace(/\\\'/g,"'");
    //eval(strScript);
    js += strScript+";"
    }
    html = null;
    regexp=null;
    strings=null;
    objs = null;
    regexp2 =