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 相关文章推荐
用dtree实现树形菜单 dtree使用说明
Oct 17 Javascript
jQuery动态创建html元素的常用方法汇总
Sep 05 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
JavaScript封装单向链表的示例代码
Sep 17 Javascript
Vue2.0搭建脚手架
Mar 13 Vue.js
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学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
php explode函数实例代码
2012/02/27 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
django的登录注册系统的示例代码
2018/05/14 Python
我用Python抓取了7000 多本电子书案例详解
2019/03/25 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
python logging模块的使用
2020/09/07 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
英文自荐信格式
2013/11/28 职场文书
主治医师岗位职责
2013/12/10 职场文书
军训自我鉴定100字
2014/02/13 职场文书
通用自荐信范文
2014/03/14 职场文书
校园演讲稿汇总
2014/05/21 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书