WEB前端

js动态加载js文件并判断加载完后执行函数

位置:首页 > WEB前端 > js教程,2019-08-08 09:57
有时候我们需要根据需要动态加载js文件,本章节就简单介绍一下如何实现此功能,希望能够给需要的朋友带来一定的帮助。
有时候我们需要根据需要动态加载js文件,本章节就简单介绍一下如何实现此功能,希望能够给需要的朋友带来一定的帮助。
一.常见加载方式:
<script type="text/javascript" src="mayi.js"></script>
上面是咱们常见的加载js文件的方式。

二.动态创建<script>对象方式:
var head=document.getElementsByTagName("head")[0]; 
var script=document.createElement("script"); 
script.type="text/javascript"; 
script.src="mayi.js"; 
head.appendChild(script);
以上代码可以实现js文件的动态加载效果。


不过上面的代码需要进行补充,因为需要判断js文件是否加载完毕,代码修改如下:
var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type='text/javascript'; 
script.onload = script.onreadystatechange=function() { 
  if(!this.readyState||this.readyState==="loaded"||this.readyState==="complete") { 
    alert("js动态加载js文件完成"); //自定义要执行的函数
    script.onload = script.onreadystatechange=null; 
  } 
}
script.src='mayi.js'; 
head.appendChild(script);
以上代码可以实现妥当的js动态加载js文件效果。

TAGS:js动态加载js文件

猜你喜欢

NewHot