如何让动态插入的javascript脚本代码跑起来。


Posted in Javascript onJanuary 09, 2007

首先,声明方法很多种,直接间接的方法都有,只罗列一般情况下的两种模式:
假设我们要装入的代码是a.js:
var foo=function(){
document.write("I am a.js content foo() function by never-online");
};

一。直接插入src,这种方法简单而直接,但有局限性,
1)
<script>
var x=document.createElement("SCRIPT");
x.src="a.js"; x.defer=true;
document.getElementsByTagName("HEAD")[0].appendChild(x);
foo();
</script>

在如上的代码放上head标签内,执行时大多数情况下是会出错,信息为:错误:缺少对象
这是由于动态创建对象script时,则于a.js还没有完全载入而导致的。执行下面的代码,你就可以发现原因了。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>never-online dynamic code test page</title>
</head>
<body>
<pre>

readyState的含义
 - uninitialized : 脚本对象刚被创建,脚本代码未载入;
 - loading : 脚本代码载入中;
 - loaded : 脚本代码完成读入,但尚未开始解释执行;
 - interactive : 解释执行过程中;
 - complete : 脚本已经执行完成。

</pre>
<div id="viewer"></div>
<script type="text/javascript">

window.onerror=function(msg,url,line){
  document.getElementById("viewer").innerHTML+='<p style="color:red">错误:'+msg+'line:'+line+'</p>';
  return true;
}

function bar(u) {
  var x=document.createElement("SCRIPT");
  x.src=u;
  x.defer=true;
  document.getElementsByTagName("HEAD")[0].appendChild(x);
}
bar("a.js");

(function getReadyState(){
  var e=document.getElementById("viewer")
  var x=true;
  var a = document.getElementsByTagName("SCRIPT");
  for (var i=0; i<a.length; i++) {
    if (a[i].readyState=='complete' && x!=false) x=true; else x=false
    e.innerHTML+=(a[i].src?a[i].src+':':'noname:')+a[i].readyState+"<br />";
  }
  e.innerHTML+="<hr/>";
  if (x) window.clearTimeout(window.timer); else
  window.timer=window.setTimeout('getReadyState()',1000);
}());

foo();

</script>
<script type="text/javascript">
//<![CDATA[
foo();
//]]>
</script>
</body>
</html>
初始值为:
a.js:loading
noname:interactive
我们可以知道,a.js依然在loading状态,在执行foo()当然是错误的。但下一个script标签执行中,a.js的readyState是complete了,所以可以执行foo()的函数。由此,我推荐你可以简单的这样运用动态用生成script标签方法来添加js的url。
解决方法如下
1)用window.setTimeout方法来执行,估计a.js已经载入完毕,才执行a.js里的函数。这个方法仍然不保险
<script>
var x=document.createElement("SCRIPT");
x.src="a.js"; x.defer=true;
document.getElementsByTagName("HEAD")[0].appendChild(x);
window.setTimeout('foo()',1000);
</script>
2)多加一个script标签放置要执行的代码
<script>
var x=document.createElement("SCRIPT");
x.src="a.js"; x.defer=true;
document.getElementsByTagName("HEAD")[0].appendChild(x);
</script>
<script>
//多一个script标签来放置
//这里a.js的readyState已经为complete了。
foo();
</script>

二、用XMLHttpRequest和window.execScript动态的执行a.js,这个方法的优点比较明显,但效率可能有所下降,没有测试,有兴趣的朋友可以自己测试一下速度。
代码如下:
<script language="javascript">
function bar(u) {
  var x=window.ActiveXObject?new ActiveXObject("MSXML2.XMLHTTP"):new XMLHttpRequest();
  x.open("GET",u,false);
  x.send(null);
  s=x.responseText;
  try {window.execScript(s)}catch(ex){window.eval(s)};//Mozilla下window.eval大致与IE的window.execScript方法功能相同
}
bar("a.js");
foo();
</script>
但这个方法仍有缺点,也就是a.js脚本中的代码有中文的情况,如何处理?那就要经常解码了,而解码恰恰是js的软肋,如果运用vbs来解码,那么兼容也就没有了。要看自己具体的应用了,我在neverModules里加载js包时用的就是window.execScript方法来解析代码,这样更可以配合js namespace的应用

顺便再加上解码

 <script type="text/javascript">
 //<![CDATA[
  function bar(u) {
    var x=window.ActiveXObject?new ActiveXObject("MSXML2.XMLHTTP"):new XMLHttpRequest();
    x.open("GET",u,false);
    x.send(null);
    s=parseScript(x.responseText);
    try {window.execScript(s)}catch(ex){window.eval(s)};
  }
  function parseScript(jscode) {
 // --- toCurrentCharset(), by aimingoo 解码
 window.execScript(''+
 'Function Asc2Unicode(n) \n'+
 ' Asc2Unicode = Chr(n) \n'+
 'End Function \n'+

 'Function SafeArray2Str(body) \n'+
 ' SafeArray2Str = CStr(body)\n'+
 'End Function','VBScript');

 var r1 = /%u(..)(..)/g, r2 = /%([8,9,A-F].)%(..)/g;
 var toUnicode = function($0, $1, $2) {return Asc2Unicode(parseInt($1+$2, 16))}
 toCurrentCharset = function(body) {
 return unescape(escape(SafeArray2Str(body)).replace(r1, "%$2%$1").replace(r2, toUnicode));
 }; jscode=toCurrentCharset(jscode); 
    window.execScript(jscode, 'JavaScript'); //IE有效,vbs解码
    return jscode;
 }

  bar('a.js');

  foo();
 //]]>
 </script>

不过大多数的情况下,第二种方法处理起来应该没有问题,如果要很严格的执行的话,第一种方法还是有改进的代码的,比如加载a.js的内容,把本身的脚本再次解析再执行,但复杂度就提高了,所以要有一个非常完美的解决方案,还需要更进一步来讨论。
我就不写这么多了,仅仅为一个提醒,还有一个抛砖引玉的作用。

Javascript 相关文章推荐
一个网马的tips实现分析
Nov 28 Javascript
基于jquery的监控数据是否发生改变
Apr 11 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
JavaScript编程的10个实用小技巧
Apr 18 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
JavaScript订单操作小程序完整版
Jun 23 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
Jul 26 Javascript
JS实现li标签的删除
Apr 12 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
JS面试题中深拷贝的实现讲解
May 07 Javascript
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 #Javascript
你所要知道JS(DHTML)中的一些技巧
Jan 09 #Javascript
sina的lightbox效果。
Jan 09 #Javascript
JS中简单的实现像C#中using功能(有源码下载)
Jan 09 #Javascript
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 #Javascript
兼容Mozilla必须知道的知识。
Jan 09 #Javascript
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
Jan 09 #Javascript
You might like
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
html下载本地
2006/06/19 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
原生JS无缝滑动轮播图
2019/10/22 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
Python实现 版本号对比功能的实例代码
2019/04/18 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
Python参数传递及收集机制原理解析
2020/06/05 Python
用python发送微信消息
2020/12/21 Python
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
政法大学毕业生自荐信范文
2014/01/01 职场文书
优秀毕业生自荐信范文
2014/01/01 职场文书
新春寄语大全
2014/04/09 职场文书
交通事故案件代理词
2015/05/23 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书