解决ajax返回innerHTML中javascript不能运行问题
来源：互联网 发布：linux boot 大小 编辑：程序博客网 时间：2024/06/05 07:47
原文地址：http://blog.csdn.net/yehell/article/details/2232326
function get_div_content(divid){
var xmlHttp = GetXmlHttpObject();
var url = "http://" + document.location.host + "/divpage.jsp?id="+divid+"&random="+Math.random();
var div_content_id = "drag_content_"+divid;
var xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("AJAX初期化失敗!");
return;
}
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState < 4){
document.getElementById(div_content_id).innerHTML="Loading...";
}
if(xmlHttp.readyState==4){
//用正则表达式匹配ajax返回的text中是否有onload,如果存在则取出内容。
var reg_onload = /<body onLoad="([^<]*)">/;
var match_onload=xmlHttp.responseText.match(reg_onload);
//用正则表达式匹配ajax返回的text中是否有<script>，如果存在则取出标签内部的内容。
var reg = /<script[^>]*>([sS]*)</script>/;
var match=xmlHttp.responseText.match(reg);
var MyScript="";
if(match!=null){
MyScript=match[1];
var script=document.createElement("script");//在模版页创建新的<script>标签
script.text=MyScript;//给新的script标签赋值
document.getElementsByTagName("head")[0].appendChild(script);//把该标签加入<head>
}
var Html=xmlHttp.responseText.replace(reg,"");//将剩下的text祛除<script>部分，插入模版页
document.getElementById(div_content_id).innerHTML=Html;
if(match_onload!=null){
eval(match_onload[1]);//如果存在onload方法，则调用；
}
}
}
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
<table>
<script type="text/javascript" defer="defer">
function test(){alert('测试下，用ajax的话，这段代码也会执行的！');}
</script>
<tbody>
<tr>
<td><input onclick="test()" value="click me" type="button"></td>
</tr>
</tbody>
</table>
在实际应用的过程中，我们经常会遇到使用ajax返回某一个网页的内容到模版页面的某一个<div>标签中显示的操作。如果返回的值仅仅是文本类数据不会影响模版页面的功能，但是如果返回的数据包括javascript，那么直接innerHTML到模版页的这段脚本是不会被运行的。原因在于浏览器只在显示模版时才解析javascript，而使用ajax返回的js是被后期倒入的并没有被解析，所以调用的时候找不到对应的function()。
想要解决这个问题，最基本的方法就是需要让浏览器可以同时解析<div>标签中的js。如果单适用IE浏览器，最简单的方式就是在<div>中的<script>标签中添加属性defer，它可以通知IE该脚本需要异步解析。但是令人头痛的是Firfox的标准总是和IE有着各种各样的不同，由于FF不支持defer所以使得开发者不得不另辟蹊径来解决这个问题。
实际上，我们可以在ajax返回数据并innerHTML到模版之前先把<div>中的javascript取出并写到模版页面的<head>中让浏览器解析。这样就相当于在打开模版页面的同时加载了所有<div>标签需要的javascript。奇怪的是这些脚本必须添加在<head>标签中FF才能有效，如果有人知道原因希望可以指点偶一下。
实现方法举例：
function get_div_content(divid){ var xmlHttp = GetXmlHttpObject(); var url = "http://" + document.location.host + "/divpage.jsp?id="+divid+"&random="+Math.random(); var div_content_id = "drag_content_"+divid; var xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("AJAX初期化失敗!"); return; } xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState < 4){ document.getElementById(div_content_id).innerHTML="Loading..."; } if(xmlHttp.readyState==4){ //用正则表达式匹配ajax返回的text中是否有onload,如果存在则取出内容。 var reg_onload = /<body onLoad="([^<]*)">/; var match_onload=xmlHttp.responseText.match(reg_onload); //用正则表达式匹配ajax返回的text中是否有<script>，如果存在则取出标签内部的内容。 var reg = /<script[^>]*>([sS]*)</script>/; var match=xmlHttp.responseText.match(reg); var MyScript=""; if(match!=null){ MyScript=match[1]; var script=document.createElement("script");//在模版页创建新的<script>标签 script.text=MyScript;//给新的script标签赋值 document.getElementsByTagName("head")[0].appendChild(script);//把该标签加入<head> } var Html=xmlHttp.responseText.replace(reg,"");//将剩下的text祛除<script>部分，插入模版页 document.getElementById(div_content_id).innerHTML=Html; if(match_onload!=null){ eval(match_onload[1]);//如果存在onload方法，则调用； } } } xmlHttp.open("GET",url,true); xmlHttp.send(null); }test.html
<table> <script type="text/javascript" defer="defer"> function test(){alert('测试下，用ajax的话，这段代码也会执行的！');} </script> <tbody> <tr> <td><input onclick="test()" value="click me" type="button"></td> </tr> </tbody></table>- 解决ajax返回innerHTML中javascript不能运行问题
- 解决ajax返回innerHTML中javascript不能运行的问题
- 解决ajax返回innerHTML中javascript不能运行问题
- innerHTML 中解决javascript问题
- 让Ajax返回的innerHTML中的Javascript代码运行起来
- ajax中如何实现innerHTML中javascript的运行
- IE中javascript不能运行问题如何解决？
- 解决在IE tbody中使用innerHTML报运行时错误问题
- JavaScript语句中再包括JavaScript语句串也能同样执行了.可以解决AJAX返回后的数据检查问题
- Ajax中动态执行返回到innerHTML中的js
- 解决ajax返回的问题。
- AJAX在servlet中返回中文乱码问题的解决
- javascript 中innerHTML函数导致“ 未知的运行时错误”
- 解决El语言在JSP中不能运行问题
- 如何解决box2DTest中出现的不能运行问题
- javascript中innerHtml用法
- ajax innerHTML中js定义数组识别问题
- javascript中ajax框架及解决缓存带来的问题
- vi str 操作
- Linux内核进程调度schedule深入理解
- asp.net web.config配置文件详解
- JDK6的新特性之十二:JTable的排序和过滤
- CDMA介绍
- 解决ajax返回innerHTML中javascript不能运行问题
- android中metadataretriever解析
- vs2008安装部署程序时如何设置程序开机启动？
- Linux命令集
- “双11”后遗症恐再现
- SAP一些学习网址
- 经典语录:
- iOS 删除文件夹下所有文件的方式
- ActionBar
