实现js文件动态加载代码实例

快乐打工仔 分类:实例代码

在很多项目中,我们可能需要根据实际需要来决定加载哪一个js文件。

而不是一股脑的将所有的js文件都加载完毕,下面就通过代码实例介绍一下如何实现此功能。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script>
function loadScript(url){
  var script = document.createElement('script'); 
  script.type = 'text/javascript';
  script.charset="utf-8";
  script.src = url;
  document.getElementsByTagName('head')[0].appendChild(script);
}
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    var rn=Math.random();
    loadScript("http://www.pipipi.net/demo/js/js/js.js?rn="+rn);
  }
}
</script>
</head>
<body>
<div id="show"></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

上面的代码实现了我们的要求,点击按钮可以动态加载并制定js文件中的代码。

一.代码注释:

(1).function loadScript(url){},参数是要加载的js文件路径。

(2).var script = document.createElement('script'),创建一个script标签。

(3).script.type = 'text/javascript',设置script的type属性值。

(4).script.charset="utf-8",设置script的charset属性值。

(5).script.src = url,设置script的src属性值。

(6).document.getElementsByTagName('head')[0].appendChild(script),将创建的script元素添加到head中。

(7).window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。

(8).var obt=document.getElementById("bt"),获取按钮对象。

(9).obt.onclick=function(){},为按钮注册click事件处理函数。

(10).var rn=Math.random(),生成一个随机数。

(11).loadScript("http://www.pipipi.net/demo/js/js/js.js?rn="+rn),之所以添加随机数是为了防止缓存。

二.相关阅读:

(1).document.createElement()可以参阅document.createElement()一章节。

(2).getElementsByTagName()可以参阅document.getElementsByTagName()一章节。

(3).appendChild()可以参阅js appendChild()一章节。

(4).Math.random()可以参阅javascript Math.random()一章节。

实现js文件动态加载代码实例

回复

我来回复
  • 暂无回复内容