javascript动态加载js文件主流浏览器兼容版
一、代码示例：
<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文件主流浏览器兼容版的更多相关文章
- JavaScript动态加载js文件
/********************************************************************* * JavaScript动态加载js文件 * 说明: * ...
- 动态加载js文件是异步的
动态加载js文件是异步的. 今天调试一个错误,一个js方法各种调不到. 原因是因为所调方法的js文件是动态加载进来的. <script type="text/javascript&qu ...
- 动态加载JS文件，并根据JS文件的加载状态来执行自己的回调函数
动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...
- ExtJS4.x动态加载js文件
动态加载js文件是ext4.x的一个新特性,可以有效的减少浏览器的压力,提高渲染速度.如动态加载自定义组件 1.在js/extjs/ux目录下,建立自定义组件的js文件. 2.编写MyWindow.j ...
- Ext JS学习第十天 Ext基础之动态加载JS文件（补充）
此文用来记录学习笔记: •Ext4.x版本提供的一大亮点就是Ext.Loader这个类的动态加载机制!只要遵循路径规范,即可动态加载js文件,方便把自己扩展组件动态加载进来,并且减轻浏览器的压力. • ...
- 详谈LABJS按需动态加载js文件
为了提高页面的打开和加载速度,我们经常把JS文件放在页面的尾部,但是有些JS必须放在页面前面,这样就会增加页面的加载时间:于是出现了按需动态加载的概念,这个概念就是当页面需要用到这个JS文件或者CSS ...
- js动态加载js文件(js异步加载之性能优化篇)
1.[基本优化] 将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完成页面渲染而不会造成页面堵塞问题,这个大家都懂. 2.[合并JS代码,尽可能少的使 ...
- 动态加载js文件
由于最近在弄echarts,关于地图类的效果,但是全国地图整体的js文件太大了,加载很耗费资源,所以要根据不同省份加载不同地区的js地图, 于是就想的比较简单, var script = docume ...
- 如何动态加载js文件，$.getScript()方法的使用
有时候我们需要动态在页面中加载js文件,jquery封装了getScript()方法,不用自己再创建标签了. 写法: $.getScript("name.js",function( ...
随机推荐
- Linux文件系统管理
第九讲 文件系统管理 基础知识点: 硬盘的构成:主要由盘片.机械手臂.磁头与主轴马达所组成,实际的数据都是写在具有磁性物质上的盘片,通过主轴马达让盘片转动,机械手臂可伸展让磁头在盘片上读取数据 ...
- 6月5 Smarty自定义函数
自定义函数:<{方法名称}> 在html页面是可以直接赋值的:(没啥作用只是知道即可) <{$a = "hello"}><div><{$a ...
- python-day2笔记
# 1.为何要有操作系统:# 程序员掌握计算机系统所有的细节有很大难度,并且管理这些部件并加以优化使用,是一件极富挑战性的工作,# 于是,计算机安装了一层软件(系统软件),称为操作系统.它的任务就是为 ...
- vue 关于npm run build 的小问题
vue项目使用npm run build命令进行打包操作,打包之后试运行报错,报错为: 且命令行警告信息为: 解决办法: 找到项目目录下的config文件夹里的index.js文件,将build对象下 ...
- .net 基础
之前给大家总结了java的面试几次技巧总结,同学们看了觉得还是不错,能够得到大家的认可,感觉还是挺不错的.现在又有同学来想小编索要.NET面试的总结了,好吧.谁让小编这么好呢!以下是.NET面试之框架 ...
- vue组件生命周期详解
Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法.这是因为箭头函数绑定了父上下文,因此this与你期 ...
- Hibernate 加载策略得总结
Hibernate 加载策略得总结 加载策略(优化查询): 策略种类: 延迟加载: 等到使用的时候才会加载数据. 立即加载: 不管使用不使用,都会立刻将数据加载. 策略的应用: 类级别的加载策略. 关 ...
- 牛客多校第三场 A—pacm team （4维背包加路径压缩）
链接:https://www.nowcoder.com/acm/contest/141/A 来源:牛客网 Eddy was a contestant participating , Eddy fail ...
- 牛客网 PAT 算法历年真题 1010 ： 月饼 (25)
月饼 (25) 时间限制 1000 ms 内存限制 32768 KB 代码长度限制 100 KB 判断程序 Standard (来自 小小) 题目描述 月饼是中国人在中秋佳节时吃的一种传统食品,不同地 ...
- 使用python将excel数据导入数据库
使用python将excel数据导入数据库 因为需要对数据处理,将excel数据导入到数据库,记录一下过程. 使用到的库:xlrd 和 pymysql (如果需要写到excel可以使用xlwt) 直接 ...