手动实施动态创建的script脚本 _Web前端

手动执行动态创建的script脚本

我们在做网页开发时候，相信使用ajax请求对页面进行局部刷新的技术，大家应该都很熟悉了吧。?
?? 有时候我们需要动态的请求服务器，这时服务器如果发过一段带有?
<script>?
//there are some codes here.?
</script>?
这样的脚本，我们如何让他客户端生效呢？?
??? 好吧，我承认我是用的jquery，需且很实现起来很简单，很多人也都是用一些js库实现的吧。如果我需要写js的源码呢？昨天同事碰到了这个问题，我就去深入地了解了一下，结果收获了一些以前不太明确的，不知道的知识。
??? 一开始不能使脚本生效的方法：?
??? 在服务器端请求得到了带有<script>code...<script>的html的片段，然后直接使用document.getElementById("target_div").innerHTML = responseText,很好，得到的html内容都进来了，而且页面显示也正确。可以在触发刚请求到<script></script>中功能的时候，发现这里的代码失效了，无论如何也执行不了。于是我就去找使script生效的方法。?
??? 后来，想到我看看jquery是怎么实现的不就行了吗？jqury的代码如下：?

Javascript代码?

//?Evalulates?a?script?in?a?global?context??
????globalEval:?function(?data?)?{??
????????if?(?data?&&?/\S/.test(data)?)?{??
????????????//?Inspired?by?code?by?Andrea?Giammarchi??
????????????//?http://webreflection.blogspot.com/2007/08/global-scope-evaluation-and-dom.html??
var?head?=?document.getElementsByTagName("head")[0]?||?document.documentElement,??
script?=?document.createElement("script");??
??
????????????script.type?=?"text/javascript";??
????????????if?(?jQuery.support.scriptEval?)??
????????????????script.appendChild(?document.createTextNode(?data?)?);??
????????????else??
????????????????script.text?=?data;??
??
????????????//?Use?insertBefore?instead?of?appendChild??to?circumvent?an?IE6?bug.??
????????????//?This?arises?when?a?base?node?is?used?(#2709).??
????????????head.insertBefore(?script,?head.firstChild?);??
????????????head.removeChild(?script?);??
????????}??
????}??

这个函数就是实现动态加载执行script的关键，函数中的参数data指的就是<script>data</script>这里的data,函数代码很简单，意思就是在<head>这个节点中的第一个位置插入<script>data</script>，这时候data就会被浏览器执行。最后再把这个节点给删了。?
??? 刚看到这个代码的时候，我就想，难道把<script>data</script>插入到<head>的第一个位置就会生效吗？而我放到自已的target_div里就不会生效，一直就搞不明白这个问题。因为没有听过哪本书，或哪个资料上这么说过啊。笨笨的我想了一下午，晚上回家的时候突然想明白了，jquery这里的插入script，和我写的插入script是不一样的,jquery是先创建一个script节点（这里是关键），然后将插入到html页面中。再看看我的插入，是直接用的innerHTML进行赋值。然而这是为什么呢？大家应该知道script的执行顺序吧，script在html文档加载的时候会执行一次。这里区别就在于，虽然是ajax请求来的script,jquery的实现方法是属于文档加载，另一个却只是文本的插入。浏览器会区分出这两种方式，所以只有jquery的方法才是正确的。?
???? 那么我们还看到为什么非要插入到head的第一个元素位置呢，这里面应该有点学问吧，我还不知道这里有什么原因。希望哪位高手可以帮我解惑。?
??? 最后删掉这个结点，是因为我们已经把script代码插入到target_div了，为了不让我们觉得莫名其秒，所以从外表的html代码中是看不到任何端倪的。?
??? 如果你已经看到这段文字，我想你应该交学费了，哈哈。当然，我也学别人东西也不交学费的。这样就算了。不过欢迎大家一起讨论、交流，能有新的想法，新的问题。

（转载请注明出处：[url=http://www.live588.org]淘金盈[/url] [url=http://www.tswa.org]博彩通[/url] ?[url=http://www.nsdm.org]澳门博彩[/url] ?[url=http://www.lixx.org]博彩网[/url][url=http://www.uvip.org]e世博[/url][url=http://www.10086money.com]时尚资讯[/url][url=http://262002954-qq-com.iteye.com]flex[/url][url=http://flexflex.iteye.com]flex[/url]）