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 相关文章推荐
页面中js执行顺序
Nov 09 Javascript
javascript window.opener的用法分析
Apr 07 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 Javascript
使用GruntJS构建Web程序之合并压缩篇
Jun 06 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
在vue中使用jointjs的方法
Mar 24 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 Javascript
Node登录权限验证token验证实现的方法示例
May 25 Javascript
node koa2 ssr项目搭建的方法步骤
Dec 11 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
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
python里大整数相乘相关技巧指南
2014/09/12 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
python实现TF-IDF算法解析
2018/01/02 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
python写入已存在的excel数据实例
2018/05/03 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
请解释接口的显式实现有什么意义
2012/05/26 面试题
安卓程序员求职信
2014/02/28 职场文书
教师节主题班会方案
2015/08/17 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle