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 相关文章推荐
jQuery之字体大小的设置方法
Feb 27 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
JavaScript获取页面中超链接数量的方法
Nov 09 Javascript
Vue实现动态响应数据变化
Apr 28 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
Sep 01 Javascript
JS开发前端团队展示控制器来为成员引流
Aug 14 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实现查看邮件是否已被阅读的方法
2013/12/03 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
改进:论坛UBB代码自动插入方式
2006/12/22 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
python控制台显示时钟的示例
2014/02/24 Python
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
python urllib爬虫模块使用解析
2019/09/05 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
什么是python的函数体
2020/06/19 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
青蓝工程实施方案
2014/03/27 职场文书
市场部经理岗位职责
2014/04/10 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
校园开放日新闻稿
2015/07/17 职场文书
给校长的建议书作文300字
2015/09/14 职场文书