如何让动态加载的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的代码如下：
// Evalulates a script in a global contextglobalEval: function( data ) {if ( data && /\S/.test(data) ) {// Inspired by code by Andrea Giammarchi// http://webreflection.blogspot.com/2007/08/global-scope-evaluation-and-dom.htmlvar head = document.getElementsByTagName("head") || document.documentElement,script = document.createElement("script");script.type = "text/javascript";if ( jQuery.support.scriptEval )script.appendChild( document.createTextNode( data ) );elsescript.text = data;// Use insertBefore instead of appendChildto 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代码中是看不到任何端倪的。
如果你已经看到这段文字，我想你应该交学费了，哈哈。当然，我也学别人东西也不交学费的。这样就算了。不过欢迎大家一起讨论、交流，能有新的想法，新的问题。
页:
[1]