您的位置：首页 > Web前端 > JavaScript

通过js动态加载js文件的实例

2011-10-12 19:54 696 查看

在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函数。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航