通过js动态加载js文件的实例
在Web开发中,可能会遇到这种情况:我们需要在一个js文件中引用另一个js文件中的函数,可是另一个函数有没有办法在页面中通过该<script>标签加载,于是,我们有了通过js动态加载js文件的需求。
具体实例详见代码:
文件1:demo.js
function demo(){
alert("demo");
}
文件2:test.js
function test(){
alert("test");
}
function loadDemo(){
var iHead = document.getElementsByTagName('HEAD').item(0);
var iScript= document.createElement("script");
iScript.type = "text/javascript";
iScript.src="demo.js";
iHead.appendChild(iScript);
}
文件3:test.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
function fun1(){
test();
}
function fun2(){
loadDemo();
}
function fun3(){
demo();
}
</script>
</head>
<body>
<input type="button" value="click1" onclick="fun1()"/>
<input type="button" value="click2" onclick="fun2()"/>
<input type="button" value="click3" onclick="fun3()"/>
</body>
</html>
把以上的3个文件放在同一个Web目录下,运行结果是在test.jsp中可以通过test.js中的loadDemo()函数动态加载demo.js文件中的js函数。