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 13 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
理解jquery事件冒泡
Jan 03 Javascript
angular.js分页代码的实例
Jul 27 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 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
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
JS隐藏参数post传值实例
2013/04/18 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
js密码强度检测
2016/01/07 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
vue2.0 datepicker使用方法
2018/02/04 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
pandas数据分组和聚合操作方法
2018/04/11 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
解决python报错MemoryError的问题
2018/06/26 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
python3实现名片管理系统
2020/11/29 Python
django云端留言板实例详解
2019/07/22 Python
python中如何使用insert函数
2020/01/09 Python
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
产品质量承诺范本
2014/03/31 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
老公婚前保证书
2015/02/28 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
党风廉政建设心得体会
2019/05/21 职场文书
pycharm无法安装cv2模块问题
2022/05/20 Python