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 相关文章推荐
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
js获取location.href的参数实例代码
Aug 02 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
解决js ajax同步请求造成浏览器假死的问题
Jan 18 Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
vue制作抓娃娃机的示例代码
Apr 17 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
PHP连接access数据库
2008/03/27 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
PHP7 弃用功能
2021/03/09 PHP
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
Python实现线程池代码分享
2015/06/21 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
Flask之请求钩子的实现
2018/12/23 Python
python的依赖管理的实现
2019/05/14 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
巴西手表购物网站:eclock
2019/03/19 全球购物
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
师德标兵先进事迹材料
2014/12/19 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
Python数据类型最全知识总结
2021/05/31 Python
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python