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高级程序设计 事件学习笔记
Sep 10 Javascript
子窗体与父窗体传值示例js代码
Aug 01 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
浅析javascript操作 cookie对象
Dec 26 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
vue el-table实现自定义表头
Dec 11 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实现将GB编码转换为UTF8
2006/11/25 PHP
可以在线执行PHP代码包装修正版
2008/03/15 PHP
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
google地图的路线实现代码
2009/08/20 Javascript
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
2017/10/25 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
python在windows下实现备份程序实例
2014/07/04 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
超简单的Python HTTP服务
2019/07/22 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
如何通过python检查文件是否被占用
2020/12/18 Python
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
error和exception有什么区别
2012/10/02 面试题
移动通信专业自荐信范文
2013/11/12 职场文书
善意的谎言事例
2014/02/15 职场文书
优秀校长事迹材料
2014/12/24 职场文书
创业计划书之农家乐
2019/10/09 职场文书
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android