解决Ajax动态加载页面中JavaScript不执行的问题

作者:半夏时间:2026-10-25 09:59:58浏览:284

本文介绍在Ajax动态加载HTML内容时,嵌入的JavaScript代码无法自动执行的常见问题。提供两种解决方案:一是利用隐藏的iframe触发onload事件调用函数;二是通过eval()函数解析并执行返回的JS字符串。文章包含具体代码示例及原理说明,帮助开发者实现无刷新数据更新与脚本执行。

1、【使用iframe】

使用iframe触发加载事件

若需在动态加载的页面中执行JavaScript,可尝试引入一个隐藏的iframe元素。



具体实现代码如下:

 
<iframe style="display:none" onload="javascript: close_ticket_onload()"></iframe>

在iframe的onload事件中指定需要调用的函数。需要注意的是,如果该页面是通过弹出层展示的,此函数必须定义在触发弹出层的父页面中。



2、【使用eval】

使用eval执行动态脚本

另一种常见情况是使用innerHTML属性将XMLHttpRequest获取的数据直接填充到DOM元素中,例如:xxx.innerHTML=XMLHttp取得的数据。


直接赋值通常不会执行其中的JS代码,此时可以结合eval方法处理,例如:xxx.innerHTML=eval(返XMLHttp取得的数据)。



以下是补充内容:

假设通过Microsoft.XMLHttp获取到的数据内容为alert('测试')。


若直接执行xxx.innerHTML=返回的数据(即alert('测试'))。


这段代码不会执行,因为页面加载完成后JavaScript引擎已停止自动解析新插入的代码块。



初期未找到合适方案时,只能使用<iframe>作为替代。尽管这并非理想的“不刷新更新数据”体验,但功能上可行。



随后继续通过Google搜索,发现CSDN上有一篇相关帖子提供了新思路。


关键代码为:xxx.innerHTML=eval(返回的数据);,例如返回alert('测试')。


测试验证成功,该方法有效。


基于此,进一步查阅了关于Eval函数的相关资料。



文章标题为:Javascript中Eval函数的使用。



简介指出,在需要动态创建语句的场景下,该函数具有独特作用。网络资料零散,此处整理以备查阅和讨论。


核心函数为【eval()函数】。


JavaScript提供了一些简化编程的技巧。


其中eval()函数可将字符串当作JavaScript表达式进行执行。


示例如下:


var the_unevaled_answer = "2 + 3";


var the_evaled_answer = eval("2 + 3");


alert("the un-evaled answer is " + the_unevaled_answer + " and the evaled answer is " + the_evaled_answer);


运行上述eval程序,可见字符串"2 + 3"在JavaScript中被实际执行了。


当将the_evaled_answer赋值为eval("2 + 3")时,JavaScript会计算结果并将和值返回给该变量。


虽然看似简单,但利用eval可根据用户输入动态创建函数,实现更复杂的功能。




以下是完整的测试代码示例:


代码片段如下:

 
<script language=javascript>
function check_user_exists(form){
u_name=form.u_name.value;
if (u_name==null||u_name==''){
alert("请您输入用户名");
return false;
} 
infoBoard=document.getElementById("checkInfo");
infoBoard.innerText='查询中...';
myurl="http://localhost/ajax/form1.asp"
retCode=openUrl(myurl);
infoBoard.innerHTML=eval(retCode);
return;
} 
function openUrl(url){
var objxml=new ActiveXObject("Microsoft.XMLHttp")
objxml.open("GET",url,false);
objxml.send();
retInfo=objxml.responseText;
if (objxml.status=="200"){
return retInfo;
} 
else{
return "-2";
} 
} 
</script>
<form name=form1 action="XXXX.asp" method="post">
<input type=text name=u_name><span id="checkInfo" style="display:none"></span><input type=button name=checkuser value="检测用户是否存
在" onClick="check_user_exists(this.form);">
</form>


form1.asp返回的内容示例为:


代码如下:

 
alert('内容仅是测试,所以写简单点')
作者最新文章