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 相关文章推荐
js停止输出代码
Jul 20 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
Node.js中的http请求客户端示例(request client)
May 04 Javascript
JavaScript箭头函数_动力节点Java学院整理
Jun 28 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
vue视图不更新情况详解
May 16 Javascript
vue+iview分页组件的封装
Nov 17 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类
2006/10/09 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
最佳JS代码编写的14条技巧
2011/01/09 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
2020/09/04 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
python根据经纬度计算距离示例
2014/02/16 Python
深入理解Python 代码优化详解
2014/10/27 Python
Python字符串中查找子串小技巧
2015/04/10 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
Python检查ping终端的方法
2019/01/26 Python
把pandas转换int型为str型的方法
2019/01/29 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
装修五一活动策划案
2014/01/23 职场文书
文明城市创建标语
2014/06/16 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
珍惜资源的建议书
2014/08/26 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
网络研修心得体会
2016/01/08 职场文书
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
Python办公自动化解决world文件批量转换
2021/09/15 Python
使用Ajax实现进度条的绘制
2022/04/07 Javascript