在Web开发时,有可能会遇到这么一种情况:我们需要通过一个js文件中引用另一个js文件中的函数,可是另一个函数有没有办法在页面中通过该<script>标签加载。于是,我们有了通过js动态加载js文件的需求。下面提供一种方案。
方法比较简单,具体实例详见代码:
文件1:demo.js
functiondemo(){alert("demo");}
文件2:test.js
functiontest(){alert("test");}functionloadDemo(){variHead=document.getElementsByTagName('HEAD').item(0);variScript=document.createElement("script");iScript.type="text/javascript";iScript.src="demo.js";iHead.appendChild(iScript);}
文件3:test.html
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>Inserttitlehere</title><scripttype="text/javascript"src="test.js"></script><scripttype="text/javascript">functionfun1(){test();}functionfun2(){loadDemo();}functionfun3(){demo();}</script></head><body><inputtype="button"value="click1"onclick="fun1()"/><inputtype="button"value="click2"onclick="fun2()"/><inputtype="button"value="click3"onclick="fun3()"/></body></html>
把以上的3个文件放在同一个目录下,运行结果是在test.html中可以通过test.js中的loadDemo()函数动态加载demo.js文件中的js函数。