如何通过JavaScript动态加载js

最新推荐文章于 2023-04-23 16:05:52 发布

chenghuo9876

最新推荐文章于 2023-04-23 16:05:52 发布

阅读量277

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/liangzhenghui/blog/220642

版权

在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.html

<!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个文件放在同一个目录下，运行结果是在test.html中可以通过test.js中的loadDemo()函数动态加载demo.js文件中的js函数。

转载于:https://my.oschina.net/liangzhenghui/blog/220642