JS 动态加载脚本的4种方法


Posted in Javascript onMay 05, 2009

如果js文件都比较小,还是一个js好,这样可以减少连接数。下面是4种比较常用的方法,大家可以根据情况选择,最后三水点靠木 将会给推荐一个。
1、直接document.write

<script language="javascript"> 
document.write("<script src='test.js'><\/script>"); 
</script>

2、动态改变已有script的src属性
<script src='' id="s1"></script> 
<script language="javascript"> 
s1.src="test.js" 
</script>

3、动态创建script元素
<script> 
var oHead = document.getElementsByTagName('HEAD').item(0); 
var oScript= document.createElement("script"); 
oScript.type = "text/javascript"; 
oScript.src="test.js"; 
oHead.appendChild( oScript); 
</script>

这三种方法都是异步执行的,也就是说,在加载这些脚本的同时,主页面的脚本继续运行,如果用以上的方法,那下面的代码将得不到预期的效果。
要动态加载的JS脚本:a.js,以下是该文件的内容
var str = "中国"; 
alert( "这是a.js中的变量:" + str );

主页面代码:
<script language="JavaScript"> 
function LoadJS( id, fileUrl ) 
{ 
var scriptTag = document.getElementById( id ); 
var oHead = document.getElementsByTagName('HEAD').item(0); 
var oScript= document.createElement("script"); 
if ( scriptTag ) oHead.removeChild( scriptTag ); 
oScript.id = id; 
oScript.type = "text/javascript"; 
oScript.src=fileUrl ; 
oHead.appendChild( oScript); 
} 
LoadJS( "a.js" ); 
alert( "主页面动态加载a.js并取其中的变量:" + str ); 
</script>

上述代码执行后 a.js 的 alert 执行并弹出消息,
但是 主页面产生了错误,没有弹出对话框。原因是 'str' 未定义,为什么呢?因为主页面在取 str 的时候 a.js 并没有完全加载成功。遇到需要同步执行脚本的时候,可以用下面的第四种方法。
4、原理:用XMLHTTP取得要脚本的内容,再创建 Script 对象。
注意:a.js必须用UTF8编码保存,要不会出错。因为服务器与XML使用UTF8编码传送数据。
主页面代码: 
<script language="JavaScript"> 
function GetHttpRequest() 
{ 
if ( window.XMLHttpRequest ) // Gecko 
return new XMLHttpRequest() ; 
else if ( window.ActiveXObject ) // IE 
return new ActiveXObject("MsXml2.XmlHttp") ; 
} 
function AjaxPage(sId, url){ 
var oXmlHttp = GetHttpRequest() ; 
oXmlHttp.OnReadyStateChange = function() 
{ 
if ( oXmlHttp.readyState == 4 ) 
{ 
if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 ) 
{ 
IncludeJS( sId, url, oXmlHttp.responseText ); 
} 
else 
{ 
alert( 'XML request error: ' + oXmlHttp.statusText + ' (' + oXmlHttp.status + ')' ) ; 
} 
} 
} 
oXmlHttp.open('GET', url, true); 
oXmlHttp.send(null); 
} 
function IncludeJS(sId, fileUrl, source) 
{ 
if ( ( source != null ) && ( !document.getElementById( sId ) ) ){ 
var oHead = document.getElementsByTagName('HEAD').item(0); 
var oScript = document.createElement( "script" ); 
oScript.language = "javascript"; 
oScript.type = "text/javascript"; 
oScript.id = sId; 
oScript.defer = true; 
oScript.text = source; 
oHead.appendChild( oScript ); 
} 
} 
AjaxPage( "scrA", "b.js" ); 
alert( "主页面动态加载JS脚本。"); 
alert( "主页面动态加载a.js并取其中的变量:" + str ); 
</script>

现在完成了一个JS脚本的动态加载。
var Rash=true; 
var msg=""; 
function norash() 
{ 
if (confirm("确定要取消吗")) 
Rash=false; 
} 
function rashit() 
{ 
setInterval('getrss()',Inttime); 
} 
function getrss() 
{ 
if (Rash==true) 
{ 
head=document.getElementsByTagName('head').item(0); 
script=document.createElement('script'); 
script.src='INCLUDE/AutoUpdate.asp'; 
script.type='text/javascript'; 
script.defer=true; 
void(head.appendChild(script)); 
window.status=msg; 
} 
} 
rashit();

注意文字加粗的地方,大家可以情况选择。
Javascript 相关文章推荐
JavaScript prototype 使用介绍
Aug 29 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
js给table赋值的实例代码
Oct 13 Javascript
JS实现DIV高度自适应窗口示例
Feb 16 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
JavaScript 字符编码规则
May 04 #Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 #Javascript
JavaScript 实现模态对话框 源代码大全
May 02 #Javascript
javascript document.referrer 用法
Apr 30 #Javascript
Ext 表单布局实例代码
Apr 30 #Javascript
js 方法实现返回多个数据的代码
Apr 30 #Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 #Javascript
You might like
PHP 定界符 使用技巧
2009/06/14 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
react路由配置方式详解
2017/08/07 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
python动态监控日志内容的示例
2014/02/16 Python
python实现的简单抽奖系统实例
2015/05/22 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
使用python求解二次规划的问题
2020/02/29 Python
什么是python的自省
2020/06/21 Python
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
银行求职推荐信范文
2013/11/30 职场文书
简单的大学生自我鉴定
2014/02/18 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
股份合作协议书范本
2014/04/14 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
大学生赌博检讨书
2014/09/22 职场文书
迎国庆横幅标语
2014/10/08 职场文书
颐和园英文导游词
2015/01/30 职场文书
建国大业电影观后感
2015/06/01 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript