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 16 Javascript
js控制frameSet示例
Sep 10 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
Vue render深入开发讲解
Apr 13 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
微信小程序webSocket的使用方法
Feb 20 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 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中文字母数字验证码实现代码
2008/04/25 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
jQuery中Form相关知识汇总
2015/01/06 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
JavaScript事件对象深入详解
2018/12/30 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
Python下的subprocess模块的入门指引
2015/04/16 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
使用Python更换外网IP的方法
2018/07/09 Python
python实现简易动态时钟
2018/11/19 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
在Python中表示一个对象的方法
2019/06/25 Python
Python 处理文件的几种方式
2019/08/23 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
基于Python实现天天酷跑功能
2021/01/06 Python
酒店前台接待岗位职责
2013/12/03 职场文书
高中运动会入场词
2014/02/14 职场文书
建议书怎么写
2014/03/12 职场文书
环保公益策划方案
2014/08/15 职场文书
立春观后感
2015/06/18 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
Nginx反向代理配置的全过程记录
2021/06/22 Servers
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js