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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
原生js开发的日历插件
Feb 04 Javascript
Vue 组件间的样式冲突污染
Aug 31 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
Aug 20 Javascript
微信小程序功能之全屏滚动效果的实现代码
Nov 22 Javascript
搭建vscode+vue环境的详细教程
Aug 31 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的大小写敏感问题整理
2011/12/29 PHP
php微信开发之上传临时素材
2016/06/24 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
PHP crc32()函数讲解
2019/02/14 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
javascript动态加载三
2012/08/22 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
Python 抓取动态网页内容方案详解
2014/12/25 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
幼儿园教师工作感言
2014/02/15 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
合伙协议书
2014/04/23 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
推广普通话主题班会
2015/08/17 职场文书
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL