一、代码示例：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>动态加载JS文件</title>

</head>

<body>

<button id="btn" onclick="loanScript('test.js'),callback">加载js文件</button>

<script type="text/javascript">

    function callback(){

        console.log("script load complete");

        loadSuccess();

    }

    function loanScript(url,callbackFun){

        var script = document.createElement("script");

        script.type = "text/javascript";

        //兼容IE浏览器

        if(script.readyState){

            script.onreadystatechange = function(){

                if(script.readyState == "loaded" || script.readyState == "complete"){

                    script.onreadystatechange = null;

                    callbackFun();

                }

            }

        }else{//其他浏览器

            script.onload = function(){

                callbackFun();

            };

        }

        script.src = url;

        document.getElementsByTagName("head")[0].appendChild(script);

    }

</script>

</body>

</html>

注意除了Firefox和Opera保证脚本文件按照代码顺序加载，其他浏览器不保证文件按照你指定的顺序加载，可通过串联操作保证文件的加载次序代码如下

window.onload=function(){

    loadScript("file1.js",function(){

        loadScript("file2.js",function(){

            loadScript("file3.js",function(){

                alert("all js document are loaded");

            });

        });

    });

}

javascript动态加载js文件主流浏览器兼容版的更多相关文章

  1. JavaScript动态加载js文件

    /********************************************************************* * JavaScript动态加载js文件 * 说明: * ...

  2. 动态加载js文件是异步的

    动态加载js文件是异步的. 今天调试一个错误,一个js方法各种调不到. 原因是因为所调方法的js文件是动态加载进来的. <script type="text/javascript&qu ...

  3. 动态加载JS文件，并根据JS文件的加载状态来执行自己的回调函数

    动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...

  4. ExtJS4.x动态加载js文件

    动态加载js文件是ext4.x的一个新特性,可以有效的减少浏览器的压力,提高渲染速度.如动态加载自定义组件 1.在js/extjs/ux目录下,建立自定义组件的js文件. 2.编写MyWindow.j ...

  5. Ext JS学习第十天 Ext基础之动态加载JS文件（补充）

    此文用来记录学习笔记: •Ext4.x版本提供的一大亮点就是Ext.Loader这个类的动态加载机制!只要遵循路径规范,即可动态加载js文件,方便把自己扩展组件动态加载进来,并且减轻浏览器的压力. • ...

  6. 详谈LABJS按需动态加载js文件

    为了提高页面的打开和加载速度,我们经常把JS文件放在页面的尾部,但是有些JS必须放在页面前面,这样就会增加页面的加载时间:于是出现了按需动态加载的概念,这个概念就是当页面需要用到这个JS文件或者CSS ...

  7. js动态加载js文件(js异步加载之性能优化篇)

    1.[基本优化] 将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完成页面渲染而不会造成页面堵塞问题,这个大家都懂. 2.[合并JS代码,尽可能少的使 ...

  8. 动态加载js文件

    由于最近在弄echarts,关于地图类的效果,但是全国地图整体的js文件太大了,加载很耗费资源,所以要根据不同省份加载不同地区的js地图, 于是就想的比较简单, var script = docume ...

  9. 如何动态加载js文件，$.getScript()方法的使用

    有时候我们需要动态在页面中加载js文件,jquery封装了getScript()方法,不用自己再创建标签了. 写法: $.getScript("name.js",function( ...

随机推荐

  1. MYSQL 总结——1

    目录 数据类型 1.数值型 2.日期/时间型 3.文本型 数据库 1.创建数据库 2.删除数据库 数据表 1.创建数据表 create 2.删除数据表 drop 3.修改数据表 4.修改表名 5.dr ...

  2. JS代码判断IE6,IE7,IE8,IE9

    做网页有时候会用到JS检测IE的版本,下面是检测Microsoft Internet Explorer版本的三种代码! 有一种代码: <script type="text/javasc ...

  3. Navicat 的安装及破解

    本地环境: ubutun 14 1.安装. ①先老实选择官方试用版安装(不推荐在各个下载平台去下载) 中文版:http://www.navicat.com.cn/download/navicat-fo ...

  4. JS保留小数 去尾法 进一法 四舍五入法

    //toFixed 四舍五入遇到坑. 1.235.toFixed(2) = 1.23 1.2350001.toFixed(2) = 1.24 //去尾法 Number.prototype.toFloo ...

  5. 函数使用八：BP_EVENT_RAISE

    此函数是关联触发一个已经定义的事件,这个事件可以放到SM36里设置JOB,这样就做成了一个事件触发JOB的东西. Import EVENTID                    事件ID ,对应S ...

  6. 数据库恢复（database restore）之兵不血刃——半小时恢复客户数据库

    昨天,一个客户打打来电话,说他们的数据库坏了,不能用了,需要我帮助恢复下,这马上要放假了,居然出了这事儿,自己也不太喜欢恢复数据库这类,尤其是他们的数据库是个win上的库,但心里很清楚,客户比咱着急, ...

  7. kaggle信用卡欺诈看异常检测算法——无监督的方法包括： 基于统计的技术，如BACON *离群检测 多变量异常值检测 基于聚类的技术；监督方法： 神经网络 SVM 逻辑回归

    使用google翻译自:https://software.seek.intel.com/dealing-with-outliers 数据分析中的一项具有挑战性但非常重要的任务是处理异常值.我们通常将异 ...

  8. find中的-exec参数

    1.find中的-exec参数 在当前目录下(包含子目录),查找所有txt文件并找出含有字符串"bin"的行 find ./ -name "*.txt" -ex ...

  9. 实验：输入一篇英文新闻，以“#”结束，统计其中a-z这26个字母各出现的次数和总字符个数。(不区分大小写)

    代码如下: #include <iostream> using namespace std; int main() { char ch; char s_letter[26]={'a','b ...

  10. python两个字典合并，两个list合并

    1.两个字典:a={'a':1,'b':2,'c':3} b= {'aa':11,'bb':22,'cc':33} 合并1:dict(a,**b)  操作如下: 合并2:dict(a.items()+ ...