解决ajax返回innerHTML中javascript不能运行问题

前端之家收集整理的这篇文章主要介绍了解决ajax返回innerHTML中javascript不能运行问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
原文地址:http://blog.csdn.net/yehell/article/details/2232326

在实际应用的过程中,我们经常会遇到使用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) {

varxmlHttp=GetXmlHttpObject();
url"http://+document.location.host/divpage.jsp?id=divid&random=Math.random();
div_content_iddrag_content_divid;
if(xmlHttp==null)
{
alert(
AJAX初期化失敗!);
return;
}

xmlHttp.onreadystatechange
function()(xmlHttp.readyState<4){
document.getElementById(div_content_id).innerHTML
Loading...
){
//用正则表达式匹配ajax返回的text中是否有onload,如果存在则取出内容
reg_onload/<bodyonLoad([^<]*)>/;
match_onloadxmlHttp.responseText.match(reg_onload);
//用正则表达式匹配ajax返回的text中是否有<script>,如果存在则取出标签内部的内容
regscript[^>]*>([sS]*)/scriptmatchxmlHttp.responseText.match(reg);

var MyScript = "" ;
if (match != null ) {
MyScript
match[1];
document.createElement();//在模版页创建新的<script>标签
script.text
MyScript;//给新的script标签赋值
document.getElementsByTagName(
head)[0].appendChild(script);//把该标签加入<head>
}
Html xmlHttp.responseText.replace(reg, );//将剩下的text祛除<script>部分,插入模版页
document.getElementById(div_content_id).innerHTML
Html;
(match_onload ) {
eval(match_onload[
]);//如果存在onload方法,则调用
}

}

xmlHttp.open(
" GET ,url,255)">true );
xmlHttp.send(
);
}

test.html

< table > script type ="text/javascript" defer ="defer" >
functiontest(){alert('测试下,用ajax的话,这段代码也会执行的!);}
</ script tbody tr td >< input onclick ="test()" value ="clickme" ="button" ></ >

猜你在找的Ajax相关文章