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

其实这篇文章与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

赞 (0)

相关推荐

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

    其实这篇文章与ajax无关,但因为是ajax项目中遇到的问题.所以.... innerHTML赋值操作时,其中的script并不会被运行,可以使用正则表达式提取script,然后eval(script); 示例代码 <html> <head> <script type="text/javascript"> <!-- function load1(){ var Content= document.getElementById("Cont

  • JS使用ajax方法获取指定url的head信息中指定字段值的方法

    本文实例讲述了JS使用ajax方法获取指定url的head信息中指定字段值的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码用来获取ajax_info.txt的head信息中的Last modified属性,最后修改时间 <!DOCTYPE html> <html> <head> <script> function loadXMLDoc(url) { var xmlhttp; if (window.XMLHttpRequest) {// code

  • ajax中get和post的说明及使用与区别

    以前没怎么仔细的研究过ajax,只是用到了就直接拿过来用,发现了问题再找解决方法.以下是我在找解决问题的过程中的一点小小的总结. 一.谈Ajax的Get和Post的区别 Get方式: 用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的资源路径后面.另外最重要的一点是,它会被客户端的浏览器缓存起来,那么,别人就可以从浏览器的历史记录中,读取到此客户的数据,比如帐号

  • jQuery的ajax中使用FormData实现页面无刷新上传功能

    jQuery的ajax中使用FormData实现页面无刷新上传功能

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口.关于FormData,大家可以看MDN文档. 1,先看效果图 期望的功能和效果很简单:点击页面中的上传文件表单控件,选择文件后点击"ajax提交",将文件上传至服务器,上传成功后,页面给出一个简单的提示. 2,前端的代

  • 使用HTML5中postMessage知识点解决Ajax中POST跨域问题

    使用HTML5中postMessage知识点解决Ajax中POST跨域问题

    由于同源策略的限制,Javascript存在跨域通信的问题,典型的跨域问题有iframe与父级的通信等.常规的几种解决方法: (1) document.domain+iframe: (2) 动态创建script: (3) iframe+location.hash: (4) flash. postMessage是HTML5为解决js跨域问题而引入的新的API,允许多个iframe/window跨域通信. HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口

  • 理解jquery ajax中的datatype属性选项值

    jquery中ajax的dataType属性用于指定服务器返回的数据类型,如果不指定,jQuery 将自动根据HTTP包MIME信息来智能判断,如果datatype选项不填写的话,会将返回的数据当成字符串处理. 一.ajax语法 复制代码 代码如下: jQuery.ajax([settings]) 参数说明 settings:用于配置 Ajax 请求的键值对集合.可以通过 $.ajaxSetup() 设置任何选项的默认值. 二.ajax的datatype选项的值 1."xml":返回

  • $.ajax中contentType: “application/json” 的用法详解

    具体内容如下所示: $.ajax({ type: httpMethod, cache:false, async:false, contentType: "application/json; charset=utf-8", dataType: "json",//返回值类型 url: path+url, data:jsonData, success: function(data){ var resultData = '返回码='+data.status+',响应结果='

  • 关于Ajax中通过response在后台传递数据问题

    这是js代码: var System = { getHttpRequest: function(url, callback, options) { if (url.length < 0) return; var option = { url: url, type: "get", dataType: "json", cache: false, timeout: 30000, beforeSend: function(XHR) { }, complete: fun

  • ajax中的async属性值之同步和异步及同步和异步区别

    jquery中ajax方法有个属性async用于控制同步和异步,默认是true,即ajax请求默认是异步请求,有时项目中会用到AJAX同步.这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出现假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除.而异步则这个AJAX代码运行中的时候其他代码一样可以运行. ajax中async这个属性,用于控制请求数据的方式,默认是true,即默认以异步的方式请求数据. 一.async值为true (异步) 当

  • 在Ajax中使用get和post所遇到的问题及解决办法

    使用get遇到的问题: 1.问题一. 缓存:当每次访问的url相同,客户端直接读取本地缓存里面的内容,即使后台数据变化前台也不会有变化: 解决方法:在?后面链接一个num=[随机数Math.random()]或者num=[时间戳new Date().getTime()],'1.php?username="May"&'+num(这里没有变量名,避免和后台参数冲突) 2.问题二. 乱码,当传递中文或者特殊字符的时候,前台显示出现乱码 解决办法:使用编码encodeURI('蜗牛')

随机推荐