ajax中指定innerHTML时如何应用其中的SCRIPT的研究

 更新时间:2007年03月06日 00:00:00   作者:  
其实这篇文章与ajax无关,但因为是ajax项目中遇到的问题.所以.... innerHTML赋值操作时,其中的script并不会被运行,可以使用正则表达式提取script,然后eval(script);


示例代码 

<html>
<head>
<script type="text/javascript">
<!--
function load1(){
var Content= document.getElementById("Content");
alert("load1");
}
function load2(){
var Content= document.getElementById("Content");
Content.innerHTML="load2:<script>load1();<\/script>";
}

function load3(){
var Content= document.getElementById("Content"); 

//为什么要Javascript必须在有效的Text标签之后,又要谈到JS在IE和FireFox中的区别了.在script脚本块

//之前如果没有有效的Text标签,IE就会出错.但FireFox可以正常运行,神啊,救救IE吧
var str="<a>Javascript必须在有效的Text标签之后</a><script type=\"text/javascript\">load1();<\/script>";
Content.innerHTML=str;
var regExp=/<script.*>(.*)<\/script>/gi;
if(regExp.test(Content.innerHTML)){
eval(RegExp.$1);
}

////以下代码是为了匹配多个脚本块而设置的,但是非常不幸的是不能运用在IE中

////只能运行于FireFox,因为够用了,所以没有写下去有兴趣的可以完成它,偶JS没学好呀
//var matchArray=str.match(regExp);
//if(matchArray){
//    for(var i=0;i<matchArray.length;i++){
//        if(regExp.test(matchArray[i])){
//            alert(RegExp.$1);
//        }
//        else{
//          alert(matchArray[i]);
//        }
//    }
//}

}


//-->
</script>
</head>
<body>
<div id="Content">
</div>
<input type="button" onclick="javascript:load1();" value="load1"/>
<input type="button" onclick="javascript:load2();" value="load2"/>
<input type="button" onclick="javascript:load3();" value="load3"/>
</body>
</html>

 

[说明]

load1

当然可以正常运行

load2中

Content.innerHTML赋值时,其中的Script并不会被运行

load3中

取得innerHTML中的脚本块出来,并eval之,方可正常运行

也许谁还有更好的办法,please mail to me blackant@tt88.cn


相关文章

  • 关于Ajax跨域问题及解决方案详析

    关于Ajax跨域问题及解决方案详析

    这篇文章主要给大家介绍了Ajax跨域问题以及解决方案的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Ajax具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • jsp+ajax实现无刷新上传文件的方法

    jsp+ajax实现无刷新上传文件的方法

    这篇文章主要介绍了jsp+ajax实现无刷新上传文件的方法,结合实例形式分析了ajax无刷新上传文件及jsp后台处理的相关技巧,需要的朋友可以参考下
    2016-01-01
  • 如何解决ajax在google chrome浏览器上失效

    如何解决ajax在google chrome浏览器上失效

    今天闲着没事做个一个ajax小练习,困扰了我很长时间,我写的ajax代码在ie、360、火狐浏览器上运行都是正常的,而在google chrome下无法正常运行,搞的我焦头烂额,最终找到解决办法,在此分享给大家,帮助那些遇到和我一样问题的朋友
    2015-10-10
  • Ajax 通过城市名获取数据(全国天气预报API)

    Ajax 通过城市名获取数据(全国天气预报API)

    本文给大家分享全国天气预报API Ajax 通过城市名获取数据,通过html和js两部分代码实现天气预报效果,输入城市就会出现天气情况,效果非常棒,感兴趣的朋友可以参考下
    2016-11-11
  • Ajax上传图片及上传前先预览功能实例代码

    Ajax上传图片及上传前先预览功能实例代码

    在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果,下面通过本文给大家分享解决Ajax上传图片及上传前先预览功能,感兴趣的朋友参考下吧
    2017-08-08
  • 关于JavaScript跨域问题及实时刷新解决方案

    关于JavaScript跨域问题及实时刷新解决方案

    在页面显示其他网站上面的数据,需要用Ajax,就涉及到跨域问题,下面有个示例,大家可以看看
    2014-06-06
  • AJAX 用户注册时的应用实例

    AJAX 用户注册时的应用实例

    我所举的这个例子是一个企业用户注册时的一个应用,当用户注册时检查用户名和企业名是否可用,以前的做法是在旁边加一个按钮,点击“检查”,就向服务器发出请求,然后等待……服务器返回信息,继续操作。
    2008-12-12
  • 使用AJAX(包含正则表达式)验证用户登录的步骤

    使用AJAX(包含正则表达式)验证用户登录的步骤

    这篇文章主要介绍了使用AJAX(包含正则表达式)验证用户登录的步骤,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • 非常简单的Ajax请求实例附源码

    非常简单的Ajax请求实例附源码

    这篇文章为大家推荐了一个非常简单的Ajax请求实例,可以在不重载页面的情况与 Web 服务器交换数据,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • AJAX入门之XMLHttpRequest慨述

    AJAX入门之XMLHttpRequest慨述

    AJAX入门之XMLHttpRequest慨述...
    2006-06-06

最新评论