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

所属分类: 网络编程 / AJAX相关 阅读数: 1017
收藏 0 赞 0 分享
其实这篇文章与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


更多精彩内容其他人还在看

AjaxSubmit()提交file文件

这篇文章主要介绍了AjaxSubmit()提交file文件的实例讲解,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

基于Blod的ajax进度条下载实现示例代码

本篇文章主要介绍了基于Blod的ajax进度条下载实现示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

使用Ajax、json实现京东购物车结算界面的数据交互实例

这篇文章主要介绍了使用Ajax、json实现京东购物车结算界面的数据交互实例,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

用Promise解决多个异步Ajax请求导致的代码嵌套问题(完美解决方案)

这篇文章主要介绍了用Promise解决多个异步Ajax请求导致的代码嵌套问题(完美解决方案),需要的朋友可以参考下
收藏 0 赞 0 分享

Ajax 传递JSON实例代码

虽然ajax全称是asynchronous javascript and XML。但目前使用ajax技术时,传递JSON已经成为事实上的标准。这篇文章主要介绍了Ajax 传递JSON实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

ajax用json实现数据传输

本文主要介绍了ajax用json实现数据传输的方法,具有很好的参考价值。下面跟着小编一起来看下吧
收藏 0 赞 0 分享

Ajax中post方法直接返回以0开头数字出错问题分析

这篇文章主要介绍了Ajax中post方法直接返回以0开头数字出错问题分析,需要的朋友可以参考下
收藏 0 赞 0 分享

ajax+springmvc实现C与View之间的数据交流方法

下面小编就为大家带来一篇ajax+springmvc实现C与View之间的数据交流方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Spring MVC前端与后端5种ajax交互方法【总结】

下面小编就为大家带来一篇Spring MVC前端与后端5种ajax交互方法【总结】。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Ajax校验是否重复的实现代码

这篇文章主要介绍了Ajax校验是否重复的实现代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多