异步动态加载script

原创 2015年07月09日 11:51:40

首先是应用场景:因为项目需要,通过HTTP请求加载另一个项目的js文件并调用该js文件的方法;
实现思路:首先用document创建script并设置各个属性,使用Ajax获取该文件的地址并赋值,调用改js方法;
实现问题:必须要先去获取js文件才能调用改js的方法,由于是异步加载,所以无法保证是否在加载完之后调用该文件中的方法;
解决思路:创建script标签并在该创建函数里加入回调函数,在回调函数里判断该文件是否加载成功,成功则在回调函数里调用该文件中的方法
附上代码:

//动态插入script标签 
function createScript(url, callback){ 
    var oScript = document.createElement('script'); 
    oScript.type = 'text/javascript'; 
    //oScript.async = true; 
    oScript.src = url; 
    /* 
    ** script标签的onload和onreadystatechange事件 
    ** IE6/7/8支持onreadystatechange事件 
    ** IE9/10支持onreadystatechange和onload事件 
    ** Firefox/Chrome/Opera支持onload事件 
    */ 

    // 判断IE8及以下浏览器 
    var isIE = !-[1,]; 
    if(isIE){ 
        oScript.onreadystatechange = function(){ 
            if(this.readyState == 'loaded' || this.readyState == 'complete'){ 
                callback(); 
            } 
        } 
    } else { 
    // IE9及以上浏览器,Firefox,Chrome,Opera 
    oScript.onload = function(){ 
        callback(); 
        } 
    } 
    document.body.appendChild(oScript); 
} 

方法大家应该都能看懂,根据浏览器不同调用不同的插入方法;
调用该方法:

createScript(data.ssoJsUrl, function(){ 

                });

完毕;

HTML5 <script>元素async,defer异步加载

原文地址:HTML5′s async Script Attribute 原文日期: 2010年09月22日 翻译日期: 2013年08月22日 (译者注: 异步加载,可以理解为无阻塞并发处理.) 我...
  • renfufei
  • renfufei
  • 2013年08月23日 10:27
  • 24391

JS异步加载的三种方式

JS同步加载,异步加载,延迟加载,图片懒加载
  • l522703297
  • l522703297
  • 2016年02月27日 12:39
  • 42984

JS/JavaScript前台异步加载并调用回调函数

代码简单直接贴代码 /** * 异步加载依赖的javascript文件 * src:script的路径 * callback:当外部的javascript文件被loa...
  • itchiang
  • itchiang
  • 2015年11月03日 17:02
  • 1773

关于动态加载JavaScript文件的几种方式

以下是遇到的几种动态加载JavaScript文件的方式,持续更新中。。。一、使用document.write/writeln()方式该种方式可以实现js文件的动态加载,原理就是在重写文档流,这种方式会...
  • a1247529789
  • a1247529789
  • 2016年06月03日 10:56
  • 2137

浅谈JavaScript异步加载的三种方式——async和defer、动态创建script

1、defer="defer"和async="true/false" html4.0中定义了defer;html5.0中定义了async。 (1)没有defer或async,浏览器会立即加载并执行指定...
  • zhouziyu2011
  • zhouziyu2011
  • 2017年03月03日 21:30
  • 1393

JavaScript 加载顺序和异步加载详解

JavaScript 加载顺序和异步加载详解
  • sinat_15951543
  • sinat_15951543
  • 2016年06月23日 10:02
  • 1240

JS动态引入js,CSS——动态创建script/link/style标签

一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc....
  • songylwq
  • songylwq
  • 2013年01月15日 15:27
  • 20270

浅谈JavaScript异步加载的三种方式——async和defer、动态创建script

1、defer="defer"和async="true/false" html4.0中定义了defer;html5.0中定义了async。 (1)没有defer或async,浏览器会立即加载并执行指定...
  • zhouziyu2011
  • zhouziyu2011
  • 2017年03月03日 21:30
  • 1393

加载文件javascript 文件的同步加载与异步加载

题记:写这篇博客要主是加深自己对加载文件的认识和总结实现算法时的一些验经和训教,如果有错误请指出,万分感谢。     HTML 4.01 的script性属     charset: 可选。指定s...
  • javawebsoa
  • javawebsoa
  • 2013年04月28日 19:11
  • 1411

JS跨域调用之JSONP--动态Script标签方式实现跨域

动态Script标签的方式往往是用来访问不在同一个域的服务器内部的数据的。例如,  当前我的域名:  d1.wwwcomy.com  我需要访问的数据:  百度翻译"chair"的结果  ...
  • zheng963
  • zheng963
  • 2015年12月29日 13:17
  • 2121
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:异步动态加载script
举报原因:
原因补充:

(最多只允许输入30个字)