如何让动态插入的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 SHA-1:Secure Hash Algorithm
Dec 20 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
layui select获取自定义属性方法
Aug 15 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
js实现轮播图特效
May 28 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自动适应范围的分页代码
2008/08/05 PHP
php利用cookie实现访问次数统计代码
2011/05/19 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
Python 命令行参数sys.argv
2008/09/06 Python
Python文件去除注释的方法
2015/05/25 Python
Zabbix实现微信报警功能
2016/10/09 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
美丽的现代设计家具:2Modern
2018/07/26 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
一套.net面试题及答案
2016/11/02 面试题
大学活动策划书范文
2014/01/10 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
自强自立美德少年事迹材料
2014/08/16 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
个人维稳承诺书
2015/05/04 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python