如何让动态插入的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 相关文章推荐
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
小程序中英文混合排序问题解决
Aug 02 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 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与SQL注入攻击[一]
2007/04/17 PHP
PHP多线程抓取网页实现代码
2010/07/22 PHP
php记录代码执行时间(实现代码)
2013/07/05 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
网上抓的一个特效
2007/05/11 Javascript
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
Python实现栈的方法
2015/05/26 Python
python基于ID3思想的决策树
2018/01/03 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
python数据挖掘需要学的内容
2019/06/23 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
python实现控制台输出颜色
2021/03/02 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
优秀员工自荐信范文
2013/10/05 职场文书
销售副总经理岗位职责
2013/12/11 职场文书
医学专业应届生的自我评价
2014/02/28 职场文书
财产保全担保书
2015/01/20 职场文书
社会实践单位意见
2015/06/05 职场文书
2016年教师节慰问信
2015/12/01 职场文书
《实心球》教学反思
2016/02/23 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
MySQL查询日期时间
2022/05/15 MySQL