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 相关文章推荐
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
May 16 Javascript
javascript日期格式化方法汇总
Oct 04 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
jquery动态切换背景图片的简单实现方法
May 14 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 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
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
使用Python解析JSON数据的基本方法
2015/10/15 Python
Python单例模式的两种实现方法
2017/08/14 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
Python通过socketserver处理多个链接
2020/03/18 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
见习期自我鉴定
2013/11/07 职场文书
高中生毕业学习总结的自我评价
2013/11/14 职场文书
自我评价范文点评
2013/12/04 职场文书
民事授权委托书范文
2014/08/02 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
党员个人对照检查材料
2014/10/01 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
Linux中各个目录的作用与内容
2022/06/28 Servers