如何让动态插入的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实现Sleep暂停功能代码
Sep 03 Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
jquery文档操作wrap()方法实例简述
Jan 10 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 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中的日期处理方法集锦
2007/01/02 PHP
一个PHP的String类代码
2010/04/20 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
js获取IFRAME当前的URL的方法
2013/11/13 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
tab栏切换原理
2017/03/22 Javascript
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
团队精神演讲稿
2013/12/31 职场文书
部队学习十八大感言
2014/01/11 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
学习心理学的体会
2014/11/07 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
重阳节活动主持词
2015/07/04 职场文书
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js