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 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
javascript Object与Function使用
Jan 11 Javascript
基于jQuery选择器的整理集合
Apr 26 Javascript
jQuery统计指定子元素数量的方法
Mar 17 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
深入浅析JavaScript函数前面的加号和叹号
Jul 09 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 Javascript
浅谈JavaScript作用域
Dec 06 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
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
浅谈js中的this问题
2017/08/31 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
Python处理PDF与CDF实例
2020/02/26 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
Python类class参数self原理解析
2020/11/19 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
培训自我鉴定
2014/01/31 职场文书
暑期培训班招生方案
2014/08/26 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
Python爬虫基础初探selenium
2021/05/31 Python
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL