动态加载JS脚本的4种方法
实现OPOA(One Page One Application)时,必须使用动态加载js. 也就是在用户选择某个菜单项后,再动态加载对应的全部js到客户端.
动态加载js的情况很多啊,比如解决ajax跨域问题,就是动态载入一个js脚本。
本文给出的四个方法,前三个是异步加载js。就是js加载和当前js脚本执行是两个线程,先加载完还是先执行当前脚本是不确定的。在加载这些脚本的同时,主页面的脚本继续运行。
第四个办法尝试用XMLHTTP取得要脚本的内容,再创建 Script 对象。经过测试,仍然不能解决异步问题。
第四种方法还是异步加载,还是会有同样的总是。只是因为加了一句
alert( "主页面动态加载JS脚本。");
让页面暂停了一下,所以这个时候a.js已经加载完了。
后一句
alert( "主页面动态加载a.js并取其中的变量:" + str );就不出错了。
如果你注掉第一个alert,还会有这个错误的。应当使用同步而不异步的XMLHTTPRequest来做动态加载。
另外:OnReadyStateChange 为全部小写。b.js应当为a.js.
可以再查阅相关资料。这种尝试是好的。
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脚本的4种方法的更多相关文章
- 动态加载JS脚本
建立dynamic.js文件,表示动态加载的js文件,里面的内容为: function dynamicJS() { alert("加载完毕"); } 如下方法中的html页面和dy ...
- 使用jQuery动态加载js脚本
动态加载Javascript是一项非常强大且有用的技术.这方面的主题在本站已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js.它们很强大,但有时候也会得不偿失.如果你使 ...
- 使用jQuery动态加载js脚本文件的方法
动态加载Javascript是一项非常强大且有用的技术.这方面的主题在网上已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js 它们很强大,但有时候也会得不偿失.如果你使 ...
- 动态加载JS脚本到HTML
如果用原生态的js 有2中方法 1.直接document.write <script language="javascript"> document.wr ...
- 动态加载script文件的两种方法
第一种就是利用ajax方式,把script文件代码从后台加载到前台,然后对加载到的内容通过eval()执行代码.第二种是,动态创建一个script标签,设置其src属性,通过把script标签插入到页 ...
- 网站动态加载JS脚本
Demo_1 function loadJS(url, fn) { var ss = document.getElementsByName('script'), loaded = false; for ...
- 动态加载 js
要实现动态加载JS脚本有4种方法: 1.直接document.write <script language="javascript"> document.write(& ...
- JS动态加载JS
1.直接document.write <script language="javascript"> document.write("<scrip ...
- 动态加载js和css
开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法. 1.动态加载js 方法一:动态加载js文件 // 动态加载js脚本文件 function loadScript(url) { v ...
随机推荐
- ubuntu10.04搭建嵌入式开发环境
改源 配置vim set number set autoindent set smartindent set tabstop=4 set incsearch 安装g++ 配置samba 1.先安装程序 ...
- jquery 验证插件 validate
1)required:true 必输字段(2)remote:"check.php" 使用ajax方法调用check.php验证输入值(3)email:true 必须输入正确格式的电 ...
- SLua
安装 1.下载最新版,将Assets目录里的所有内容复制到工程中,对于最终产品,可以删除例子,文档等内容,如果是开发阶段则无所谓. 2.等待unity编译完毕,如果一切顺利的话,将出现SLua菜单,点 ...
- 魔兽争霸Ⅲ运行时不能初始化directX的错误解决
运行魔兽争霸3不能初始化DirectX错误这样解决: 1:在运行中输入(win+r):dxdiag,查看显示栏,确定电脑已安装好directx 8.1以上,且下面的三个加速都已开启. 2:如果没有安装 ...
- 简易promise
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- Spring MVC 注解和XML的区别
注解与XML配置的区别 注解:是一种分散式的元数据,与源代码紧绑定. xml:是一种集中式的元数据,与源代码无绑定. 因此注解和XML的选择上可以从两个角度来看:分散还是集中,源代码绑定/无绑定. ...
- 从内部剖析C# 集合之--Dictionary
Dictionary和hashtable用法有点相似,他们都是基于键值对的数据集合,但实际上他们内部的实现原理有很大的差异, 先简要概述一下他们主要的区别,稍后在分析Dictionary内部实现的大概 ...
- POJ 1275 Cashier Employment(差分约束)
http://poj.org/problem?id=1275 题意 : 一家24小时营业的超市,要雇出纳员,需要求出超市每天不同时段需要的出纳员数,午夜只需一小批,下午需要多些,希望雇最少的人,给出每 ...
- maven 依赖排除
在项目中遇到一个问题,项目使用spring 3.x,引用了某些包,这些包又依赖了spring2.x,造成项目无法启动.这种情况就需要用到maven的依赖排除,配置如下: 使用以下代码排除依赖xxxx引 ...
- linux 和 ecos 内核线程创建/信号量/event等对比
ecos: int gx_thread_create (const char *thread_name, gx_thread_id *thread_id, void(*entry_func)(void ...