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 写类方式之一
Jul 05 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
Sep 28 Javascript
js新闻滚动 js如何实现新闻滚动效果
Jan 07 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
网页图片延时加载的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缓存类分享     php缓存机制
2014/01/22 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
yii去掉必填项中星号的方法
2015/12/28 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
PHP分享图片的生成方法
2018/04/25 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
python获取程序执行文件路径的方法(推荐)
2018/04/26 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
python基础 range的用法解析
2019/08/23 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
信息系统专业个人求职信范文
2013/12/07 职场文书
服务员态度差检讨书
2014/10/28 职场文书
Python机器学习之基础概述
2021/05/19 Python