利用js代码引入其他js文件到页面中
在web开发中我们可能会碰到写很多js文件,例如当我们写了一个a.js文件和一个b.js文件,我们想用a.js中的方法fun_a()去调用b.js里面的fun_b()方法,这个时候我们就会想到在页面要同时把a.js和b.js文件,页面上要引用这两js文件我们就需要写两个的script标签把这两个引用进来,但是我们只想通过一个script标签就把两个文件甚至更多的文件引进来,怎么办呢?
我们可以通过如下的方式来解决:
1.在页面上添加script标签引进a.js
<html>
<head>
<title>js示例</title>
<script type="text/javascript" language="javascript" src="a.js"></script>
</head>
<body>
<input type="button" value="执行a.js中的fun_a()" onClick="fun_a()" />
</body>
</html>
<head>
<title>js示例</title>
<script type="text/javascript" language="javascript" src="a.js"></script>
</head>
<body>
<input type="button" value="执行a.js中的fun_a()" onClick="fun_a()" />
</body>
</html>
2.在a.js中写如下代码
var js_element=document.createElement("script");
js_element.setAttribute("type","text/javascript");
js_element.setAttribute("src","b.js");
document.getElementsByTagName("head")[0].appendChild(js_element);
function fun_a()
{
fun_b();
}
js_element.setAttribute("type","text/javascript");
js_element.setAttribute("src","b.js");
document.getElementsByTagName("head")[0].appendChild(js_element);
function fun_a()
{
fun_b();
}
3.在b.js中写如下代码
function fun_b()
{
window.alert("b.js中的fun_b()");
}
{
window.alert("b.js中的fun_b()");
}
4.把这个三个文件放在同一目录下,点击按钮就会出来如下的执行效果
这证明我们成功的通过a.js引进了b.js
解释一下a.js中的几句代码
var js_element=document.createElement("script");//这句是创建一个script标签
js_element.setAttribute("type","text/javascript");//脚本用的是javascript
js_element.setAttribute("src","b.js");//script标签中引进b.js文件
document.getElementsByTagName("head")[0].appendChild(js_element);//把script标签加入到<head></head>中