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 相关文章推荐
图片完美缩放
Sep 07 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
JS实现Enter键跳转及控件获得焦点
Aug 12 Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
package.json中homepage属性的作用详解
Mar 11 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分页显示制作详细讲解
2006/10/09 PHP
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
详解Node.js中的Async和Await函数
2018/02/22 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
Python中针对函数处理的特殊方法
2014/03/06 Python
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
python装饰器与递归算法详解
2016/02/18 Python
Python实现多线程HTTP下载器示例
2017/02/11 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
彻底理解Python list切片原理
2017/10/27 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
python add_argument()用法解析
2020/01/29 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
C/C++有关内存的思考题
2015/12/04 面试题
建筑工程毕业生自我鉴定
2014/01/14 职场文书
法律七进实施方案
2014/03/15 职场文书
计算机专业毕业生求职信
2014/04/30 职场文书
商场客服专员岗位职责
2014/06/13 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书