js 文件引入实现代码


Posted in Javascript onApril 23, 2010

也不好麻烦让他们从新写一个方法,由于他们都引用了这个AA.js文件,想在这边在AA.js后执行一个函数自动把jq库引入,于是想到引入js文件方法:

getScript : function(s,call){ 
var el = UI.DC('script'); 
        if (call) { 
            el.onload =el.onreadystatechange=call; 
        } 
        UI.A(el,'type','text/javascript'); 
        UI.A(el,'src',s); 
        UI.GT(document,'head')[0].appendChild(el); 
    } 
/*UI.DC为创建对象,UI.A为属性赋值,GT为getElementsByTagName的简写*/

于是这样执行UI.getScript("js/jquery/jquery-1.4.2.min.js",function(){alert("载入成功")});

结果在IE和ff下确实弹出了载入成功,可当我再HTML中使用jq的时候在IE下怎么都执行不了,不断刷新偶尔还能执行,放在服务器上和在客户端的静态页面也有差别,但在火狐下没有问题.........

于是想到是不是jq文件在载入的时候和html载入是并行的,当jq载入成功之前HTML文件已经执行,于是在html的body结束之时添加

<script> 
alert("html前执行") 
</script>

执行发现确实是先弹出hmtl前执行,后弹出载入成功。在火狐下也是这样。上传到服务器上时感觉火狐的弹出会同时出现.....

于是开始不解,到底怎么设置才能确保jq文件载入完之后才能执行html body中的东东,怎么像在head中添加<script type="text/javascript" src="js/jquery.js"></script>那样引入文件..
思索总想到以前浏览一个页面是他用了一个loading文件引入许多js文件,在html中就可使用这些引入的文件函数,搜索查到了这个js文件内容为:

var Collapsar = { 
Version: '0.0.1', 
require: function(libraryName) { 
// inserting via DOM fails in Safari 2.0, so brute force approach 
document.write('<script type="text/javascript" src="'+libraryName+'"></script>'); 
}, 
load: function() { 
if((typeof Prototype=='undefined') || 
(typeof Element == 'undefined') || 
(typeof Element.Methods=='undefined') || 
parseFloat(Prototype.Version.split(".")[0] + "." + 
Prototype.Version.split(".")[1]) < 1.5) 
throw("The Prototype JavaScript framework 1.5.0+ is required"); $A(document.getElementsByTagName("script")).findAll( function(s) { 
return (s.src && s.src.match(/loader\.js(\?.*)?$/)) 
}).each( function(s) { 
var path = s.src.replace(/loader\.js(\?.*)?$/,''); 
var includes = s.src.match(/\?.*load=([a-z,]*)/); 
(includes ? includes[1] : "").split(',').each( 
function(include) { 
Collapsar.require(path+include+'.js') }); 
}); 
} 
} 
Collapsar.load();

调用的时候为<script type="text/javascript" src="js/loder.js?load=jquery,...,..."></script>这样等号后面的文件都可引入,其实是这句在关键的作用 document.write('<script type="text/javascript" src="'+libraryName+'"></script>');
刚看到有些疑惑write方法不是像文档内添加内容吗,内容应该在body标签中出现啊,实验发现如果是字符串确实出现在文档内,当如是script link等标签就出现在了head内;那在head中添加引用js文件难道和直接在head中一样载入他们之后才执行body中的内容....他载入和上面添加script有什么区别啊........

实验:在AA.js中添加:

UI.getsc=(function(){
document.write('<script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script>');
})()

让他自动执行,在body的第一行就引入jq的方法,实验确实成功了,在IE和在ff一样都可执行;
有时间继续实验...................

Javascript 相关文章推荐
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
JQuery日期插件datepicker的使用方法
Mar 03 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
Jun 04 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 Javascript
网页图片延时加载的js代码
Apr 22 #Javascript
基于jQuery的表格操作插件
Apr 22 #Javascript
JQuery实现的在新窗口打开链接的方法小结
Apr 22 #Javascript
JQuery 技巧和窍门整理(8个)
Apr 22 #Javascript
超级酷和最实用的jQuery实例收集(20个)
Apr 21 #Javascript
基于jquery的超简单上下翻
Apr 20 #Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 #Javascript
You might like
摘自织梦CMS中的图片处理类
2015/08/08 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
Prototype Date对象 学习
2009/07/12 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
js数组去重的hash方法
2016/12/22 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
深入解析Python中的变量和赋值运算符
2015/10/12 Python
python奇偶行分开存储实现代码
2018/03/19 Python
python写入已存在的excel数据实例
2018/05/03 Python
python中partial()基础用法说明
2018/12/30 Python
python算的上脚本语言吗
2020/06/22 Python
python上selenium的弹框操作实现
2020/07/13 Python
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
个人查摆问题及整改措施
2014/10/16 职场文书
工资证明格式模板
2015/06/12 职场文书
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
Java常用函数式接口总结
2021/06/29 Java/Android
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android
MySQL 如何限制一张表的记录数
2021/09/14 MySQL
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL