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 相关文章推荐
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
JS 去除Array中的null值示例代码
Nov 20 Javascript
js使用ajax读博客rss示例
May 06 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
一个简单不报错的summernote 图片上传案例
Jul 11 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 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实现导出带样式的Excel
2016/08/28 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
文本链接逐个出现的js脚本
2007/12/12 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
VUE前后端学习tab写法实例
2019/08/06 Javascript
JS实现简单的表格增删
2020/01/16 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
Python编程中归并排序算法的实现步骤详解
2016/05/04 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
法制宣传教育方案
2014/05/09 职场文书
节能环保演讲稿
2014/08/28 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
应聘教师自荐信
2015/03/26 职场文书
《索溪峪的野》教学反思
2016/02/19 职场文书
详解Python类和对象内容
2021/06/22 Python
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers