实现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. 【BZOJ】1053: [HAOI2007]反素数ant

    1053: [HAOI2007]反素数ant Description: g(x)表示x的约数个数,反素数:对于任意的i (i < x),均有g(i) < g(x),则x为反素数:现在输入不 ...

  2. MVC-Model数据注解(一)-系统(DataAnnotations)

    要使用验证,首先,web.config要开户验证: <appSettings> <add key="ClientValidationEnabled" value= ...

  3. ASP.NET MVC Spring.NET 整合

    请注明转载地址:http://www.cnblogs.com/arhat 在整合这三个技术之前,首先得说明一下整合的步骤,俗话说汗要一口一口吃,事要一件一件做.同理这个三个技术也是.那么在整合之前,需 ...

  4. cocos2d lua的cclog 在logcat中显示

    -- cclog cclog = function(...) release_print(string.format(...)) end 改成这样就可以了

  5. 1行代码为每个Controller自定义“TabBar”-b

    这篇文章大致会带你实现以下的功能,废话少说,先看东西: JPNavigationController.gif Q&A:Demo里都有那些东西? 01.关于自定义导航栏 01.第一个控制器的导航 ...

  6. MongoDB 权限认证

    MongoDB已经使用很长一段时间了,基于MongoDB的数据存储也一直没有使用到权限访问(MongoDB默认设置为无权限访问限制),因为考虑到数据安全的原因特地花了一点时间研究了一下,网上搜出来的解 ...

  7. caffe之(四)全连接层

    在caffe中,网络的结构由prototxt文件中给出,由一些列的Layer(层)组成,常用的层如:数据加载层.卷积操作层.pooling层.非线性变换层.内积运算层.归一化层.损失计算层等:本篇主要 ...

  8. jquery dom ready, jqery2.1.1实现-源码分析

    本文链接http://www.cnblogs.com/Bond/p/4178311.html jquery document  ready的实现其很很简,虽说简单,其很很多人还是没去关注过它的实现.我 ...

  9. UINavigationController使用的注意事项

    1.常用属性viewControllers //所有在栈中的控制器topViewController //栈顶控制器navigationBar //导航栏 竖屏下默认44,横屏默认32 2.对navi ...

  10. Activiti的Eclipse插件离线安装指南

    原文地址:http://www.tuicool.com/articles/yUnURjy