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

在Web开发中,可能会遇到这种情况:我们需要在一个js文件中引用另一个js文件中的函数,可是另一个函数有没有办法在页面中通过该<script>标签加载,于是,我们有了通过js动态加载js文件的需求。

具体实例详见代码:

文件1demo.js

function demo(){

       alert("demo");

}

文件2test.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);  

}

文件3test.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函数。

posted @ 2011-10-12 19:54  小龙在线  阅读(4190)  评论(0编辑  收藏  举报