js 文件引入实现代码
更新时间：2010年04月23日 15:51:01 作者：
项目前端的文件和后台开发分离，只要后台开发更新svn前端的js，css文件都会更新，以前引用的是一个js文件如AA.js，由于想在项目中引用jquery库，如果在每个文件的头部都引让他们从新写入这个jq文件不太可能
也不好麻烦让他们从新写一个方法，由于他们都引用了这个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一样都可执行;
有时间继续实验...................
相关文章
这篇文章主要介绍了微信小程序实现页面分享onShareAppMessage，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了JavaScript控制按钮可用或不可用的方法,主要通过设置按钮disabled属性来实现这一功能,需要的朋友可以参考下2015-04-04
本文主要讲解了JavaScript闭包和回调,闭包的概念和特性,结合实例分析了使用步骤与方法2017-08-08
这篇文章主要介绍了JavaScript实现定时隐藏与显示图片的方法,可实现javascript定时关闭图片的功能,涉及javascript针对页面元素属性定时操作的相关技巧,需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了JavaScript实现返回顶部按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
javascript模拟的Ping效果代码 （Web Ping）
JS虽然发送不了真正Ping的ICMP数据包,但Ping的本质仍然是请求/回复的时间差,HTTP自然可以实现此功能.2011-03-03
这篇文章主要介绍了javascript实现图片循环渐显播放的方法,涉及javascript操作图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
微信公众号平台接口开发 获取access_token过程解析
这篇文章主要介绍了微信公众号平台接口开发 获取access_token过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
这篇文章主要为大家详细介绍了js实现分割上传大文件的相关资料,需要的朋友可以参考下2016-03-03
chunks 的概念与 Webpack 的代码分割（Code Splitting）功能密切相关,通过 optimization.splitChunks 配置项可以实现对代码块的分类和优化,下面给大家介绍webpack 中 chunks配置和使用详解,感兴趣的朋友一起看看吧2025-04-04
最新评论