Ajax中动态施行返回到innerHTML中的js
日期：2014-05-17 浏览次数：20720 次
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 =
摘要:
最近在为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 =
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
