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正则表达式中参数g(全局)的作用
Nov 11 Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
详解Javascript中new()到底做了些什么?
Mar 29 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
JS document内容及样式操作完整示例
Jan 14 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 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
jQuery Ajax文件上传(php)
2009/06/16 Javascript
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
python根据文本生成词云图代码实例
2019/11/15 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
建筑设计师岗位职责
2013/11/18 职场文书
我的网上商城创业计划书
2013/12/26 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
2014年售票员工作总结
2014/11/19 职场文书
创业计划书之家政服务
2019/09/18 职场文书
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技