动态加载 js 文件以及判断 js 加载完成

常用的动态加载js文件有以下几种方式:

1.直接document.write

document.write("<script src='test.js'><\/script>");

2.动态创建script元素

var loadJS = function(jsUrl){
    var _doc = document.getElementsByTagName('head').item(0),
        script  = document.createElement('script');
    script.setAttribute('type','text/javascript');
    script.setAttribute('src',jsUrl);
    _doc.appendChild(script);
};
loadJS("https://cdn.bootcss.com/angular.js/1.6.6/angular.js");

3.预留一个script标签,然后动态改变src

这几种方法都是异步执行的,也就是说,在加载这些脚本的同时,主页面的脚本继续运行,如果用以上的方法,那下面的代码将得不到预期的效果。

比如现在需要动态加载a.js,并拿到其中的str的值,a.js如下:

var str = "我是str的值";
console.log("我是a.js中的:"+str)

主页面js:

//loadJS()略
loadJS("a.js");
console.log( "主页面动态加载a.js并取其中的变量:" + str );

上述代码执行后a.js中的console执行并输出正确内容,但是主页面的console产生了错误,原因是str is not defined,为什么呢?因为主页面在取str的时候a.js并没有完全加载成功。在有些情况下就需要等待a.js加载完成后才能进一步的操作,所以可以使用下面的方法来解决:

var dynamicLoad = function(jsUrl,fn){
    var _doc = document.getElementsByTagName('head')[0],
        script = document.createElement('script');
    script.setAttribute('type','text/javascript');
    script.setAttribute('src',jsUrl);
    _doc.appendChild(script);
    script.onload = script.onreadystatechange = function(){
        if(!this.readyState || this.readyState=='loaded' || this.readyState=='complete'){
            fn();
        }
        script.onload = script.onreadystatechange = null;
    }  
};
dynamicLoad('a.js',function(){
    console.log("加载完成啦!!!"+str);
});

相关说明:

1、VIP会员无限制任意下载,免积分。立即前往开通>>

2、下载积分可通过日常 签到绑定邮箱 以及 积分兑换 等途径获得!

3、本站资源大多存储在云盘,如出现链接失效请评论反馈,如有密码,均为:www.ipipn.com。

4、所有站内资源仅供学习交流使用。未经原版权作者许可,禁止用于任何商业环境,否则后果自负。为尊重作者版权,请购买正版作品。

5、站内资源来源于网络公开发表文件或网友分享,如侵犯您的权益,请联系管理员处理。

6、本站提供的源码、模板、软件工具等其他资源,都不包含技术服务,请大家谅解!

7、源码、模板等资源会随着技术、坏境的升级而存在部分问题,还请慎重选择。

PS.源码均收集自网络,如有侵犯阁下权益,请发信件至: admin@ipipn.com .


源站网 » 动态加载 js 文件以及判断 js 加载完成

发表评论

赞助本站发展 维持服务器消耗

全站源码免费下载 立刻赞助