Mar 31
js脚本中动态调用外部js库的研究
Javascript
看题目可能不太懂什么意思
最近做一些广告库的代码
给第三方去接入,不可能让人家在网站的head标签中给你插入一段js引用
而我考虑到 以js库的形式能以文件的方式缓存,多次使用的时候,提高下载效率
减少服务器压力。
在脚本中 首先要动态在head中插入一段js库的标签
代码如下
其中 test.js 有很多工具方法,被封装在一个对象中,我在接下来的代码中需要调用
问题肯定来了,test.js 什么时候加载完成呢,立刻调用它的方法肯定找不到定义啦
思考:
去监听script标签 加载,产生一个回调方法,去触发后面的代码开始
OK 没问题,但是假如有1个以上的脚本都要用这一个JS库呢?他到底在回调中 运行哪个脚本的初始函数?
初始函数都加进去运行好了! 但是你怎么就知道所有的脚本都加载完了呢?
也就是说回调运行的初始函数 不一定都能调得到 ,所以这个方法不行
同样考虑ajax去监听加载状态,产生回调同样不行
解决方法:
在test.js 库的最后一行设置一个全局变量,变量名复杂点防止冲突 比如 $value_version_2010 = "2010.03.21";
在你的脚本这样写
不断去检查这个变量,不存在就延时50秒 重新执行,一旦有了值,你的代码就可以安全执行了
你可以设置个全局变量记录重新执行的次数,来防止无限执行,当然只要是全局变量 你都要考虑命名安全,尽量复杂点吧
各位看官,不知道在这方面谁还有什么高招,欢迎跟帖
最近做一些广告库的代码
给第三方去接入,不可能让人家在网站的head标签中给你插入一段js引用
而我考虑到 以js库的形式能以文件的方式缓存,多次使用的时候,提高下载效率
减少服务器压力。
在脚本中 首先要动态在head中插入一段js库的标签
代码如下
(function(){
if(document.getElementById('jsid'))
return;
var s=document.createElement('script');
s.type='text/javascript';
s.id = 'jsid';
s.src='js/test.js';
document.getElementsByTagName('head')[0].appendChild(s);
})();
其中 test.js 有很多工具方法,被封装在一个对象中,我在接下来的代码中需要调用
问题肯定来了,test.js 什么时候加载完成呢,立刻调用它的方法肯定找不到定义啦
思考:
去监听script标签 加载,产生一个回调方法,去触发后面的代码开始
OK 没问题,但是假如有1个以上的脚本都要用这一个JS库呢?他到底在回调中 运行哪个脚本的初始函数?
初始函数都加进去运行好了! 但是你怎么就知道所有的脚本都加载完了呢?
也就是说回调运行的初始函数 不一定都能调得到 ,所以这个方法不行
同样考虑ajax去监听加载状态,产生回调同样不行
解决方法:
在test.js 库的最后一行设置一个全局变量,变量名复杂点防止冲突 比如 $value_version_2010 = "2010.03.21";
在你的脚本这样写
(function(){
if(typeof $value_version_2010 != "undefined"){
//你的代码
}else{
setTimeout(arguments.callee,50);
}
})();
不断去检查这个变量,不存在就延时50秒 重新执行,一旦有了值,你的代码就可以安全执行了
你可以设置个全局变量记录重新执行的次数,来防止无限执行,当然只要是全局变量 你都要考虑命名安全,尽量复杂点吧
各位看官,不知道在这方面谁还有什么高招,欢迎跟帖
2010-5-20 15:01:23 回复该留言
EMENT,请教你一个问题,怎么在js中引用第三方服务的js文件,并且执行啊?
2010-5-20 15:23:24 回复该留言
看情况把,如果是在文档流加载过程中执行,就是用js 去write 一个script标签,src指向第三方js文件地址,如果你要调用其中的函数和变量,你就得监听这个script标签是否加载完成,并且写个回调的handler。 写一个全局变量,记录此文件是否被加载执行,后面用到其中的东西,以此为依据。
如果不是在文档流中执行,可以把该js文件 以 script 标签的形式,插入到页面的head 当中来执行。
2010-6-7 15:58:23 回复该留言
可以使用队列的方式来加载