忘记密码?

一键登录

草根吧源码论坛

JS动态加载JS代码 JS内加载JS的小代码 小技巧

查看: 315|回复: 0

[HTML+CSS+JS特效] JS动态加载JS代码 JS内加载JS的小代码 小技巧

[复制链接]

5760

主题

704

热度

2218

贡献

管理员

Rank: 9Rank: 9Rank: 9

DZ专员

发表于 2014-12-15 15:36:10 | 显示全部楼层 |阅读模式 | 百度  360  谷歌 
分享到:
1、直接document.write 如果是从一个接口直接读取JS内容而不是从一个JS文件读取,可以直接用接口的路径代替“test.js”,例如用“http://www.caogen8.co/getJS.action”代替”test.js“。下同
  1. <script language="javascript">
  2.     document.write("<script src='test.js'><\/script>");
  3. </script>
复制代码

2、动态改变已有script的src属性
  1. <script src='' id="s1"></script>
  2. <script language="javascript">
  3.     s1.src="test.js"
  4. </script>
复制代码

3、动态创建script元素
  1. <script>
  2.     var oHead = document.getElementsByTagName('HEAD').item(0);
  3.     var oScript= document.createElement("script");
  4.     oScript.type = "text/javascript";
  5.     oScript.src="test.js";
  6.     oHead.appendChild( oScript);
  7. </script>
复制代码

  这三种方法都是异步执行的,也就是说,在加载这些脚本的同时,主页面的脚本继续运行,如果用以上的方法,那下面的代码将得不到预期的效果。
要动态加载的JS脚本:a.js,以下是该文件的内容。
var str = "中国";
alert( "这是a.js中的变量:" + str );
主页面代码:
  1. <script language="JavaScript">
  2. function LoadJS( id, fileUrl )
  3. {
  4.     var scriptTag = document.getElementById( id );
  5.     var oHead = document.getElementsByTagName('HEAD').item(0);
  6.     var oScript= document.createElement("script");
  7.     if ( scriptTag  ) oHead.removeChild( scriptTag  );
  8.     oScript.id = id;
  9.     oScript.type = "text/javascript";
  10.     oScript.src=fileUrl ;
  11.     oHead.appendChild( oScript);
  12. }
  13. LoadJS( "a.js" );
  14. alert( "主页面动态加载a.js并取其中的变量:" + str );
  15. </script>
复制代码

上述代码执行后 a.js 的 alert 执行并弹出消息,
但是 主页面产生了错误,没有弹出对话框。原因是 'str' 未定义,为什么呢?因为主页面在取 str 的时候 a.js 并没有完全加载成功。遇到需要同步执行脚本的时候,可以用下面的第四种方法。
4、原理:用XMLHTTP取得要脚本的内容,再创建 Script 对象。
注意:a.js必须用UTF8编码保存,要不会出错。因为服务器与XML使用UTF8编码传送数据。
主页面代码:
  1. <script language="JavaScript">
  2. function GetHttpRequest()
  3. {
  4.     if ( window.XMLHttpRequest ) // Gecko
  5.         return new XMLHttpRequest() ;
  6.     else if ( window.ActiveXObject ) // IE
  7.         return new ActiveXObject("MsXml2.XmlHttp") ;
  8. }
  9. function AjaxPage(sId, url){
  10.     var oXmlHttp = GetHttpRequest() ;
  11.     oXmlHttp.OnReadyStateChange = function()  
  12.     {
  13.         if ( oXmlHttp.readyState == 4 )
  14.         {
  15.             if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 )
  16.             {
  17.                 IncludeJS( sId, url, oXmlHttp.responseText );
  18.             }
  19.             else
  20.             {
  21.                 alert( 'XML request error: ' + oXmlHttp.statusText + ' (' + oXmlHttp.status + ')' ) ;
  22.             }
  23.         }
  24.     }
  25.     oXmlHttp.open('GET', url, true);
  26.     oXmlHttp.send(null);
  27. }
  28. function IncludeJS(sId, fileUrl, source)
  29. {
  30.     if ( ( source != null ) && ( !document.getElementById( sId ) ) ){
  31.         var oHead = document.getElementsByTagName('HEAD').item(0);
  32.         var oScript = document.createElement( "script" );
  33.         oScript.language = "javascript";
  34.         oScript.type = "text/javascript";
  35.         oScript.id = sId;
  36.         oScript.defer = true;
  37.         oScript.text = source;
  38.         oHead.appendChild( oScript );
  39.     }
  40. }
  41. AjaxPage( "scrA", "b.js" );
  42. alert( "主页面动态加载JS脚本。");
  43. alert( "主页面动态加载a.js并取其中的变量:" + str );
  44. </script>
复制代码

现在完成了一个JS脚本的动态加载。

帖子地址: 

本文来源于草根吧源码论坛 www.caogen8.co,欢迎大家下载。
如果您没有贡献需要充值,可以直接在线充值,点击充值
如果你需要加入本站赞助VIP会员,可以直接在线开通,点击开通
如果找不到您要的资源,请搜索一下,点击搜索
回复

举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆 用百度帐号登录 一键登录:

本版积分规则

收藏帖子 返回列表 搜索
快速回复 返回顶部 返回列表