关于动态加载js脚本的话题

如何动态执行js脚本

event1.js的内容为:alert("event1.js成功加载");

1.document.write('<script src="event1.js"><\/script>');  经测试在ie7+版本上均有效;

2更改src属性在chrome,ff下并没有效果,在ie8-有效;

例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>

</head>

<body>

<button id="btn">点我</button>

<script id="s1" src=""></script>
<script>
s1.src="event1.js";
</script>

</body>
</html>

3.动态创建script标签,在chrome,ff,ie下均有效;

例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>

</head>

<body>

<button id="btn">点我</button>

 

<script>
addEv();
function addEv(){
document.getElementById("btn").onclick=function(){
var script=document.createElement("script");
script.src="event1.js";
document.body.appendChild(script);
};
}

</script>

</body>
</html>

 

以上的三种方法都是异步的,还是举一个例子吧:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<button id="btn">点我</button>
<script>
var script=document.createElement("script");
script.src="event1.js";
document.body.appendChild(script);

setTimeout("console.log(str)",1000);//一般情况下在控制台正常打印出str的值
alert(str);//一般会报一个str未定义的错误
</script>
</body>
</html>

 

posted @ 2015-10-28 14:09  jcbtl  阅读(194)  评论(0编辑  收藏  举报