首页 web前端 js教程 如何让动态插入的javascript脚本代码跑起来。_javascript技巧

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

May 16, 2016 pm 07:21 PM

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

一。直接插入src,这种方法简单而直接,但有局限性,
1)
<script> <BR>var x=document.createElement("SCRIPT"); <BR>x.src="a.js"; x.defer=true; <BR>document.getElementsByTagName("HEAD")[0].appendChild(x); <BR>foo(); <BR></script>


在如上的代码放上head标签内,执行时大多数情况下是会出错,信息为:错误:缺少对象
这是由于动态创建对象script时,则于a.js还没有完全载入而导致的。执行下面的代码,你就可以发现原因了。



never-online dynamic code test page


 <br><br>readyState的含义 <br> - uninitialized : 脚本对象刚被创建,脚本代码未载入; <br> - loading : 脚本代码载入中; <br> - loaded : 脚本代码完成读入,但尚未开始解释执行; <br> - interactive : 解释执行过程中; <br> - complete : 脚本已经执行完成。 <br><br>
登录后复制


<script> <br><br>window.onerror=function(msg,url,line){ <BR> document.getElementById("viewer").innerHTML+='<p style="color:red">错误:'+msg+'line:'+line+''; <BR> return true; <BR>} <br><br>function bar(u) { <BR> var x=document.createElement("SCRIPT"); <BR> x.src=u; <BR> x.defer=true; <BR> document.getElementsByTagName("HEAD")[0].appendChild(x); <BR>} <BR>bar("a.js"); <br><br>(function getReadyState(){ <BR> var e=document.getElementById("viewer") <BR> var x=true; <BR> var a = document.getElementsByTagName("SCRIPT"); <BR> for (var i=0; i<a.length; i++) { <BR> if (a[i].readyState=='complete' && x!=false) x=true; else x=false <BR> e.innerHTML+=(a[i].src?a[i].src+':':'noname:')+a[i].readyState+"<br />"; <BR> } <BR> e.innerHTML+="<hr/>"; <BR> if (x) window.clearTimeout(window.timer); else <BR> window.timer=window.setTimeout('getReadyState()',1000); <BR>}()); <br><br>foo(); <br><br></script>
<script> <BR>//<![CDATA[ <BR>foo(); <BR>//]]> <BR></script>


初始值为:
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> <BR>var x=document.createElement("SCRIPT"); <BR>x.src="a.js"; x.defer=true; <BR>document.getElementsByTagName("HEAD")[0].appendChild(x); <BR>window.setTimeout('foo()',1000); <BR></script>
2)多加一个script标签放置要执行的代码
<script> <BR>var x=document.createElement("SCRIPT"); <BR>x.src="a.js"; x.defer=true; <BR>document.getElementsByTagName("HEAD")[0].appendChild(x); <BR></script>
<script> <BR>//多一个script标签来放置 <BR>//这里a.js的readyState已经为complete了。 <BR>foo(); <BR></script>

二、用XMLHttpRequest和window.execScript动态的执行a.js,这个方法的优点比较明显,但效率可能有所下降,没有测试,有兴趣的朋友可以自己测试一下速度。
代码如下:
<script> <BR>function bar(u) { <BR> var x=window.ActiveXObject?new ActiveXObject("MSXML2.XMLHTTP"):new XMLHttpRequest(); <BR> x.open("GET",u,false); <BR> x.send(null); <BR> s=x.responseText; <BR> try {window.execScript(s)}catch(ex){window.eval(s)};//Mozilla下window.eval大致与IE的window.execScript方法功能相同 <BR>} <BR>bar("a.js"); <BR>foo(); <BR></script>
但这个方法仍有缺点,也就是a.js脚本中的代码有中文的情况,如何处理?那就要经常解码了,而解码恰恰是js的软肋,如果运用vbs来解码,那么兼容也就没有了。要看自己具体的应用了,我在neverModules里加载js包时用的就是window.execScript方法来解析代码,这样更可以配合js namespace的应用

顺便再加上解码

 <script> <BR> //<![CDATA[ <BR> function bar(u) { <BR> var x=window.ActiveXObject?new ActiveXObject("MSXML2.XMLHTTP"):new XMLHttpRequest(); <BR> x.open("GET",u,false); <BR> x.send(null); <BR> s=parseScript(x.responseText); <BR> try {window.execScript(s)}catch(ex){window.eval(s)}; <BR> } <BR> function parseScript(jscode) { <BR> // --- toCurrentCharset(), by aimingoo 解码 <BR> window.execScript(''+ <BR> 'Function Asc2Unicode(n) \n'+ <BR> ' Asc2Unicode = Chr(n) \n'+ <BR> 'End Function \n'+ <br><br> 'Function SafeArray2Str(body) \n'+ <BR> ' SafeArray2Str = CStr(body)\n'+ <BR> 'End Function','VBScript'); <br><br> var r1 = /%u(..)(..)/g, r2 = /%([8,9,A-F].)%(..)/g; <BR> var toUnicode = function($0, $1, $2) {return Asc2Unicode(parseInt($1+$2, 16))} <BR> toCurrentCharset = function(body) { <BR> return unescape(escape(SafeArray2Str(body)).replace(r1, "%$2%$1").replace(r2, toUnicode)); <BR> }; jscode=toCurrentCharset(jscode); <BR> window.execScript(jscode, 'JavaScript'); //IE有效,vbs解码 <BR> return jscode; <BR> } <br><br> bar('a.js'); <br><br> foo(); <BR> //]]> <BR> </script>

不过大多数的情况下,第二种方法处理起来应该没有问题,如果要很严格的执行的话,第一种方法还是有改进的代码的,比如加载a.js的内容,把本身的脚本再次解析再执行,但复杂度就提高了,所以要有一个非常完美的解决方案,还需要更进一步来讨论。
我就不写这么多了,仅仅为一个提醒,还有一个抛砖引玉的作用。
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

前端热敏纸小票打印遇到乱码问题怎么办? 前端热敏纸小票打印遇到乱码问题怎么办? Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中,小票打印是一个常见的需求。然而,很多开发者在实...

谁得到更多的Python或JavaScript? 谁得到更多的Python或JavaScript? Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

神秘的JavaScript:它的作用以及为什么重要 神秘的JavaScript:它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

如何使用JavaScript将具有相同ID的数组元素合并到一个对象中? 如何使用JavaScript将具有相同ID的数组元素合并到一个对象中? Apr 04, 2025 pm 05:09 PM

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中?在处理数据时,我们常常会遇到需要将具有相同ID�...

如何实现视差滚动和元素动画效果,像资生堂官网那样?
或者:
怎样才能像资生堂官网一样,实现页面滚动伴随的动画效果? 如何实现视差滚动和元素动画效果,像资生堂官网那样? 或者: 怎样才能像资生堂官网一样,实现页面滚动伴随的动画效果? Apr 04, 2025 pm 05:36 PM

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网(https://www.shiseido.co.jp/sb/wonderland/)中�...

console.log输出结果差异:两次调用为何不同? console.log输出结果差异:两次调用为何不同? Apr 04, 2025 pm 05:12 PM

深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异,并解释其背后的原因。�...

JavaScript难以学习吗? JavaScript难以学习吗? Apr 03, 2025 am 12:20 AM

学习JavaScript不难,但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程,通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误,使用调试技巧。5)优化性能,遵循最佳实践。

PowerPoint可以运行JavaScript吗? PowerPoint可以运行JavaScript吗? Apr 01, 2025 pm 05:17 PM

在PowerPoint中可以运行JavaScript,通过VBA调用外部JavaScript文件或嵌入HTML文件来实现。1.使用VBA调用JavaScript文件,需启用宏并具备VBA编程知识。2.嵌入包含JavaScript的HTML文件,简单易行但受安全限制。优点包括扩展功能和灵活性,劣势涉及安全性、兼容性和复杂性,实际应用需注意安全性、兼容性、性能和用户体验。

See all articles