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

本文探讨了在网页中动态插入及执行JavaScript脚本的方法,包括解决innerHTML导致的脚本丢失问题,通过eval执行脚本的限制,以及利用浏览器特性高效执行脚本的技术。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

摘要:

最近在为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>,麻烦。因为容器中的控件都是我们自己开发的,其中关键脚本的输 出和html的输出是可以分开写的,所以想到是否分成两部分进行一个更新,一个容器放真正的html,一个容器专门放script,修改代码如下:


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

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

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

 

动态执行Script:

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

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

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

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


在Callback返回的函数中调用:
   

本来以为事情告一段落,结果新的问题又出来了。

通过eval执行的脚本倒是运行了,但是其中定义类的脚本却丢失了,比如:

其中定义类的脚本(比如变量,比如匿名函数)都无法加到当前的window域内,立即执行的脚本则正确运行了。看来无法通过eval来执行script的动态输出了。
搜索网络上的一些文章之后,得到一个新的方法,是利用ie本身的机制来执行的。即当节点被移除的时候,ie会重新解析节点内部的html,有脚本则会执行相关的脚本,不过这里面的脚本必须设置defer属性才可以。新方法如下:

此方法充分利用了浏览器自身的特性,执行效率高,兼容性好。唯一的缺点就是脚本中不能包含 document.write。还有另外一个方法如下:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值