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 相关文章推荐
javascript之卸载鼠标事件的代码
May 14 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
jQuery中bind()方法用法实例
Jan 19 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
关于Function中的bind()示例详解
Dec 02 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
vue.js+element 默认提示中英文操作
Nov 11 Javascript
如何实现vue的tree组件
Dec 03 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中数组的三种排序方法分享
2012/05/07 PHP
测试php函数的方法
2013/11/13 PHP
PHP数组实例详解
2016/06/26 PHP
javascript跨域刷新实现代码
2011/01/01 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
python如何写个俄罗斯方块
2020/11/06 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
Java编程面试题
2016/04/04 面试题
数据管理员的自我评价分享
2013/11/15 职场文书
外语学院毕业生的自我鉴定
2013/11/28 职场文书
快餐店的创业计划书范文
2014/01/29 职场文书
《草原》教学反思
2014/02/15 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
vue实现锚点定位功能
2021/06/29 Vue.js