科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网›软件频道 ›如何让动态插入的javascript脚本代码跑起来。

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

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

如何让动态插入的javascript脚本代码跑起来。首先，声明方法很多种，直接间接的方法都有，只罗列一般情况下的两种模式：

作者：Leave For Back 来源：CSDN 2008年3月16日

关键字： JavaScript 动态插入 java

  • 评论
  • 分享微博
  • 分享邮件

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

一。直接插入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的应用
加上脚本解码（用vbs来解码）：
 <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)  '+
 ' Asc2Unicode = Chr(n)  '+
 'End Function  '+

 'Function SafeArray2Str(body)  '+
 ' SafeArray2Str = CStr(body) '+
 '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的内容，把本身的脚本再次解析再执行，但复杂度就提高了，所以要有一个非常完美的解决方案，还需要更进一步来讨论。
我就不写这么多了，仅仅为一个提醒，还有一个抛砖引玉的作用。  
    • 评论
    • 分享微博
    • 分享邮件
    VIP专区
    邮件订阅

    如果您非常迫切的想了解IT领域最新产品与技术信息，那么订阅至顶网技术邮件将是您的最佳途径之一。

    重磅专题
    往期文章
    最新文章

    业界热点:

    北京第二十六维信息技术有限公司（至顶网）版权所有. 京ICP备15039648号-7 京ICP证161336号 京公网安备 11010802021500号