JS动态插入并立即执行回调函数的方法


Posted in Javascript onApril 21, 2016

本文实例讲述了JS动态插入并立即执行回调函数的方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="loading">加载中……</div>
<mce:script type="text/JavaScript">
<!--
function loadJs(id,url,callback){
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = url;
 script.id = id;
 script.onload = script.onreadystatechange = function(){
  alert(script.readyState);
  if(script.readyState && script.readyState != 'loaded' && script.readyState != 'complete') return ;
  script.onreadystatechange = script.onload = null
  if(callback) callback();
 }
 document.body.appendChild(script);
}
loadJs('jQuery','jquery.js',function(){$('#loading').html('jquery.js加载完毕')})
// --></mce:script>
</body>
</html>

动态插入js文件在提高页面加载速度和跨域问题上有非常重要的作用。上面就是一个简单例子。

ie 上支持 onreadystatechange , 不支持 onload

firefox上支持 onload , 不支持onreadystatechange

ie上面不一定loaded 或者是 complete触发 , 或者两个都会触发,所以用或来判断。

需要注意的是script.onreadystatechange 和script.readyState 的大小写形式,不区分大小写就可能导致不易发现的错误。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
一个简单的js鼠标划过切换效果
Jun 30 Javascript
javascript中字符串拼接需注意的问题
Jul 13 Javascript
js常用排序实现代码
Dec 28 Javascript
jQuery 拖动层(在可视区域范围内)
May 24 Javascript
查找iframe里元素的方法可传参
Sep 11 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
js实现点赞按钮功能的实例代码
Mar 06 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
JavaScript 反射学习技巧
Oct 16 Javascript
jQuery插件datatables使用教程
Apr 21 #Javascript
JavaScript预解析及相关技巧分析
Apr 21 #Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 #Javascript
JS实现队列与堆栈的方法
Apr 21 #Javascript
JS、jQuery中select的用法详解
Apr 21 #Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 #Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 #Javascript
You might like
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
什么是JavaScript
2009/08/13 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
Python基于百度云文字识别API
2018/12/13 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
技校毕业生的自我评价
2013/12/27 职场文书
自考生自我评价分享
2014/01/18 职场文书
安全检查与奖惩制度
2014/01/23 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
初中英语课后反思
2014/04/25 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
校车安全责任书
2014/08/25 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
中学生检讨书范文
2014/11/03 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书