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利用控件对windows的操作实现原理与应用
Dec 23 Javascript
js监听键盘事件示例代码
Jul 26 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
Feb 11 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
django使用channels2.x实现实时通讯
Nov 28 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
19个超实用的PHP代码片段
2014/03/14 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
开启PHP的伪静态模式
2015/12/31 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
js url传值中文乱码之解决之道
2009/11/20 Javascript
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
Python API 自动化实战详解(纯代码)
2019/06/11 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
Python 远程开关机的方法
2020/11/18 Python
python中的unittest框架实例详解
2021/02/05 Python
python爬虫如何解决图片验证码
2021/02/14 Python
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
清洁工岗位职责
2014/01/29 职场文书
C++程序员求职信范文
2014/04/14 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python