Ajax中动态执行返回到innerHTML中的js
********************************************************************
* 版权声明
*
* 本文以Creative Commons的
发布,请严格遵循该授权协议。
* 本文首发于博客园, 此声明为本文章中不可或缺的一部分。
* 作者网名： 浪子
* 作者EMAIL：dayichen (at)163.com
* 作者BLOG： Http://Www.Cnblogs.Com/Walkingboy
*
********************************************************************
[CallbackPlus]Ajax中动态执行返回到innerHTML中的js
－Written by 浪子@cnblogs.com (07-08-20)
摘要:
最近在为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 = null; eval(js); return js; }在Callback返回的函数中调用：html = html.replace(/<script type=\'text\/javascript\'>/g,"<script>").replace(/<script type=\"text\/javascript\">/g,"<script>");//把不同的script标签替换为一样的 AnalyzeHtml(html,"<script>","</s"+"cript>") ;
本来以为事情告一段落，结果新的问题又出来了。
通过eval执行的脚本倒是运行了，但是其中定义类的脚本却丢失了，比如：
//丢失 var a = "变量"; //丢失 function run(){ //TODO: } //正常运行 alert("执行函数");其中定义类的脚本（比如变量，比如匿名函数）都无法加到当前的window域内，立即执行的脚本则正确运行了。看来无法通过eval来执行script的动态输出了。
搜索网络上的一些文章之后，得到一个新的方法，是利用ie本身的机制来执行的。即当节点被移除的时候，ie会重新解析节点内部的html，有脚本则会执行相关的脚本，不过这里面的脚本必须设置defer属性才可以。新方法如下：后记：/* * 描述：跨浏览器的设置 innerHTML 方法 * 允许插入的 HTML 代码中包含 script 和 style * 作者：kenxu <ken@ajaxwing.com> * 日期：2006-03-23 * 参数： * el: 合法的 DOM 树中的节点 * htmlCode: 合法的 HTML 代码 * 经测试的浏览器：ie5+, firefox1.5+, opera8.5+ */ var setInnerHTML = function (el, htmlCode) { var ua = navigator.userAgent.toLowerCase(); if (ua.indexOf('msie') >= 0 && ua.indexOf('opera') < 0) { htmlCode = '<div style="display:none">for IE</div>' + htmlCode; htmlCode = htmlCode.replace(/<script([^>]*)>/gi, '<script$1 defer>'); el.innerHTML = htmlCode; el.removeChild(el.firstChild); } else { var el_next = el.nextSibling; var el_parent = el.parentNode; el_parent.removeChild(el); el.innerHTML = htmlCode; if (el_next) { el_parent.insertBefore(el, el_next) } else { el_parent.appendChild(el); } } }此方法充分利用了浏览器自身的特性，执行效率高，兼容性好。唯一的缺点就是脚本中不能包含 document.write。还有另外一个方法如下：/* innerhtml.js * Copyright Ma Bingyao <andot@ujn.edu.cn> * Version: 1.9 * LastModified: 2006-06-04 * This library is free. You can redistribute it and/or modify it. * http://www.coolcode.cn/?p=117 */ var global_html_pool = []; var global_script_pool = []; var global_script_src_pool = []; var global_lock_pool = []; var innerhtml_lock = null; var document_buffer = ""; function set_innerHTML(obj_id, html, time) { if (innerhtml_lock == null) { innerhtml_lock = obj_id; } else if (typeof(time) == "undefined") { global_lock_pool[obj_id + "_html"] = html; window.setTimeout("set_innerHTML('" + obj_id + "', global_lock_pool['" + obj_id + "_html']);", 10); return; } else if (innerhtml_lock != obj_id) { global_lock_pool[obj_id + "_html"] = html; window.setTimeout("set_innerHTML('" + obj_id + "', global_lock_pool['" + obj_id + "_html'], " + time + ");", 10); return; } function get_script_id() { return "script_" + (new Date()).getTime().toString(36) + Math.floor(Math.random() * 100000000).toString(36); } document_buffer = ""; document.write = function (str) { document_buffer += str; } document.writeln = function (str) { document_buffer += str + "\n"; } global_html_pool = []; var scripts = []; html = html.split(/<\/script>/i); for (var i = 0; i < html.length; i++) { global_html_pool[i] = html[i].replace(/<script[\s\S]*$/ig, ""); scripts[i] = {text: '', src: '' }; scripts[i].text = html[i].substr(global_html_pool[i].length); scripts[i].src = scripts[i].text.substr(0, scripts[i].text.indexOf('>') + 1); scripts[i].src = scripts[i].src.match(/src\s*=\s*(\"([^\"]*)\"|\'([^\']*)\'|([^\s]*)[\s>])/i); if (scripts[i].src) { if (scripts[i].src[2]) { scripts[i].src = scripts[i].src[2]; } else if (scripts[i].src[3]) { scripts[i].src = scripts[i].src[3]; } else if (scripts[i].src[4]) { scripts[i].src = scripts[i].src[4]; } else { scripts[i].src = ""; } scripts[i].text = ""; } else { scripts[i].src = ""; scripts[i].text = scripts[i].text.substr(scripts[i].text.indexOf('>') + 1); scripts[i].text = scripts[i].text.replace(/^\s*<\!--\s*/g, ""); } } var s; if (typeof(time) == "undefined") { s = 0; } else { s = time; } var script, add_script, remove_script; for (var i = 0; i < scripts.length; i++) { var add_html = "document_buffer += global_html_pool[" + i + "];\n"; add_html += "document.getElementById('" + obj_id + "').innerHTML = document_buffer;\n"; script = document.createElement("script"); if (scripts[i].src) { script.src = scripts[i].src; if (typeof(global_script_src_pool[script.src]) == "undefined") { global_script_src_pool[script.src] = true; s += 2000; } else { s += 10; } } else { script.text = scripts[i].text; s += 10; } script.defer = true; script.type = "text/javascript"; script.id = get_script_id(); global_script_pool[script.id] = script; add_script = add_html; add_script += "document.getElementsByTagName('head').item(0)"; add_script += ".appendChild(global_script_pool['" + script.id + "']);\n"; window.setTimeout(add_script, s); remove_script = "document.getElementsByTagName('head').item(0)"; remove_script += ".removeChild(document.getElementById('" + script.id + "'));\n"; remove_script += "delete global_script_pool['" + script.id + "'];\n"; window.setTimeout(remove_script, s + 10000); } var end_script = "if (document_buffer.match(/<\\/script>/i)) {\n"; end_script += "set_innerHTML('" + obj_id + "', document_buffer, " + s + ");\n"; end_script += "}\n"; end_script += "else {\n"; end_script += "document.getElementById('" + obj_id + "').innerHTML = document_buffer;\n"; end_script += "innerhtml_lock = null;\n"; end_script += "}"; window.setTimeout(end_script, s); }
做完这个功能，花去了我大半天的时间，中间过程跌宕起伏，此情此景，不禁让我想到了经典台词“秋香，真是几经波折啊！”^_^......
