实现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种方法的更多相关文章

  1. 动态加载JS脚本

    建立dynamic.js文件,表示动态加载的js文件,里面的内容为: function dynamicJS() { alert("加载完毕"); } 如下方法中的html页面和dy ...

  2. 使用jQuery动态加载js脚本

    动态加载Javascript是一项非常强大且有用的技术.这方面的主题在本站已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js.它们很强大,但有时候也会得不偿失.如果你使 ...

  3. 使用jQuery动态加载js脚本文件的方法

    动态加载Javascript是一项非常强大且有用的技术.这方面的主题在网上已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js 它们很强大,但有时候也会得不偿失.如果你使 ...

  4. 动态加载JS脚本到HTML

    如果用原生态的js 有2中方法  1.直接document.write  <script language="javascript">      document.wr ...

  5. 动态加载script文件的两种方法

    第一种就是利用ajax方式,把script文件代码从后台加载到前台,然后对加载到的内容通过eval()执行代码.第二种是,动态创建一个script标签,设置其src属性,通过把script标签插入到页 ...

  6. 网站动态加载JS脚本

    Demo_1 function loadJS(url, fn) { var ss = document.getElementsByName('script'), loaded = false; for ...

  7. 动态加载 js

    要实现动态加载JS脚本有4种方法: 1.直接document.write <script language="javascript"> document.write(& ...

  8. JS动态加载JS

    1.直接document.write <script language="javascript">     document.write("<scrip ...

  9. 动态加载js和css

    开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法. 1.动态加载js 方法一:动态加载js文件 // 动态加载js脚本文件 function loadScript(url) { v ...

随机推荐

  1. ubuntu10.04搭建嵌入式开发环境

    改源 配置vim set number set autoindent set smartindent set tabstop=4 set incsearch 安装g++ 配置samba 1.先安装程序 ...

  2. jquery 验证插件 validate

    1)required:true 必输字段(2)remote:"check.php" 使用ajax方法调用check.php验证输入值(3)email:true 必须输入正确格式的电 ...

  3. SLua

    安装 1.下载最新版,将Assets目录里的所有内容复制到工程中,对于最终产品,可以删除例子,文档等内容,如果是开发阶段则无所谓. 2.等待unity编译完毕,如果一切顺利的话,将出现SLua菜单,点 ...

  4. 魔兽争霸Ⅲ运行时不能初始化directX的错误解决

    运行魔兽争霸3不能初始化DirectX错误这样解决: 1:在运行中输入(win+r):dxdiag,查看显示栏,确定电脑已安装好directx 8.1以上,且下面的三个加速都已开启. 2:如果没有安装 ...

  5. 简易promise

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  6. Spring MVC 注解和XML的区别

      注解与XML配置的区别 注解:是一种分散式的元数据,与源代码紧绑定. xml:是一种集中式的元数据,与源代码无绑定. 因此注解和XML的选择上可以从两个角度来看:分散还是集中,源代码绑定/无绑定. ...

  7. 从内部剖析C# 集合之--Dictionary

    Dictionary和hashtable用法有点相似,他们都是基于键值对的数据集合,但实际上他们内部的实现原理有很大的差异, 先简要概述一下他们主要的区别,稍后在分析Dictionary内部实现的大概 ...

  8. POJ 1275 Cashier Employment(差分约束)

    http://poj.org/problem?id=1275 题意 : 一家24小时营业的超市,要雇出纳员,需要求出超市每天不同时段需要的出纳员数,午夜只需一小批,下午需要多些,希望雇最少的人,给出每 ...

  9. maven 依赖排除

    在项目中遇到一个问题,项目使用spring 3.x,引用了某些包,这些包又依赖了spring2.x,造成项目无法启动.这种情况就需要用到maven的依赖排除,配置如下: 使用以下代码排除依赖xxxx引 ...

  10. linux 和 ecos 内核线程创建/信号量/event等对比

    ecos: int gx_thread_create (const char *thread_name, gx_thread_id *thread_id, void(*entry_func)(void ...