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

最新推荐文章于 2023-02-15 17:37:05 发布

原创最新推荐文章于 2023-02-15 17:37:05 发布 · 953 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript #firefox #button #function #input

ASP.NET 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态执行代码的方法。通过修改DOM元素innerHTML属性并利用正则表达式匹配出脚本块，再通过eval函数执行这些脚本，可以在页面上动态加载和运行JavaScript代码。文章探讨了在不同浏览器（如IE和Firefox）下执行效果的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例代码

<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