如何让动态插入的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和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
React Navigation 使用中遇到的问题小结
May 08 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 Javascript
Webpack的Loader和Plugin的区别
Nov 09 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/09/07 PHP
php 如何获取数组第一个值
2013/08/06 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
总结一些js自定义的函数
2006/08/05 Javascript
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
js常用代码段整理
2011/11/30 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
jQuery操作cookie
2016/08/08 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
Python常用模块用法分析
2014/09/08 Python
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
Python 爬虫的工具列表大全
2016/01/31 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
python实现飞机大战项目
2020/03/11 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
HTML5图片预览实例分享
2014/06/04 HTML / CSS
校园环保建议书
2014/05/14 职场文书
广告宣传策划方案
2014/05/21 职场文书
提拔干部考察材料
2014/05/26 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js