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( ...
随机推荐
- find xss
from :http://blog.sina.com.cn/s/blog_68d342d90100nh7b.html 什么是XSS跨站攻击: http://baike.baidu.com/view/5 ...
- python面向对象之 类的关系
内容梗概: 1. 依赖关系 2. 关联关系, 组合关系, 聚合关系 3. 继承关系, self到底是什什么鬼? 4. 类中的特殊成员 1. 依赖关系def:在方法中给方法传递一个对象. 此时类与类之间 ...
- python 查看文件名和文件路径
查看文件名和文件路径 1 >>> import os 2 >>> url = 'https://images0.cnblogs.com/i/311516/20140 ...
- 4月24 php基础及函数的应用
PHP是一种被广泛认可应用,运行在服务端的脚本语言,PHP需要安转PHP应用程序服务器去解释执行,是用来协助Web服务器工作的编程语言,因此所写的任何代码只有在www文件下的才能实施预览.PHP是一种 ...
- 有一个问题关于stl函数中的算法问题
是不是stl中的算法函数中参数只要是和函数相关的就是函数对象和谓词?
- CCF-CSP 201312-5 I'm stuck !
I'm stuck 试题编号: 201312-5 试题名称: I’m stuck! 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给定一个R行C列的地图,地图的每一个方格可能 ...
- 导出csv文件数字会自动变科学计数法的解决方法
其实这个问题跟用什么语言导出csv文件没有关系.Excel显示数字时,如果数字大于12位,它会自动转化为科学计数法:如果数字大于15位,它不仅用于科学技术费表示,还会只保留高15位,其他位都变0.解决 ...
- php-fpm占用cpu和内存过高100% 解决办法
参考网站: https://www.fujieace.com/php/php-fpm.html https://www.fujieace.com/php/pm-max_children-2.html ...
- CAS5.3-下载安装
cas版本:cas5.3 环境准备:1.JDK8:2.Apache Maven:3.Apache Tomcat:4.git 1.通过git工具(本文使用的是TortoiseGit,也可用IDE或者gi ...
- API设计和命名
1.前言 对于前端开发而言,肯定会和API打交道,大家也都会想过怎么设计自己的API.优秀的 API 之于代码,就如良好内涵对于每个人.好的 API 不但利于使用者理解,开发时也会事半功倍,后期维护更 ...