如果AJAX加载的数据是一个HTML片段,而且这个HTML片段还包含脚本

一、 问题描述

下面举个简单的例子,演示问题所在。在下面的例子中,假设变量responseText就是AJAX加载的HTML片段数据,其中包含脚本弹出一条消息,用innerHTML方法插入ID为ajaxData的DIV中,你可能期望看到弹出那个消息框,结果你发现没有,问题就是这样。

var responseText = '

这是一个段落

';

document.getElementById('ajaxData').innerHTML = responseText;

二、两种解决办法

1、 利用JavaScript的eval方法执行脚本。

本方法的具体实现思路是把xmlHttp.responseText中的脚本都抽取出来,不管AJAX加载的HTML包含多少个脚本块,我们对找出来的脚本块都调用eval方法执行它即可。下面提供一个封装好的函数:

AAffA0nNPuCLAAAAAElFTkSuQmCCfunction executeScript(html)

{

var reg = /

//对整段HTML片段按<\/script>拆分

var htmlBlock = html.split("<\/script>");

for (var i in htmlBlock)

{

var blocks;//匹配正则表达式的内容数组,blocks[1]就是真正的一段脚本内容,因为前面reg定义我们用了括号进行了捕获分组

if (blocks = htmlBlock[i].match(reg))

{

//清除可能存在的注释标记,对于注释结尾-->可以忽略处理,eval一样能正常工作

var code = blocks[1].replace(/

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐