myJavaBlog

java世界
随笔 - 43, 文章 - 0, 评论 - 2, 引用 - 0
数据加载中……

手动执行动态创建的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代码 
  1. // Evalulates a script in a global context  
  2.     globalEval: function( data ) {  
  3.         if ( data && /\S/.test(data) ) {  
  4.             // Inspired by code by Andrea Giammarchi  
  5.             // http://webreflection.blogspot.com/2007/08/global-scope-evaluation-and-dom.html  
  6. var head = document.getElementsByTagName("head")[0] || document.documentElement,  
  7. script = document.createElement("script");  
  8.   
  9.             script.type = "text/javascript";  
  10.             if ( jQuery.support.scriptEval )  
  11.                 script.appendChild( document.createTextNode( data ) );  
  12.             else  
  13.                 script.text = data;  
  14.   
  15.             // Use insertBefore instead of appendChild  to circumvent an IE6 bug.  
  16.             // This arises when a base node is used (#2709).  
  17.             head.insertBefore( script, head.firstChild );  
  18.             head.removeChild( script );  
  19.         }  
  20.     }  

 


这个函数就是实现动态加载执行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.d9732.com]澳门博彩[/url])

posted on 2012-04-17 15:31 夏凡 阅读(543) 评论(0)  编辑  收藏


只有注册用户登录后才能发表评论。


网站导航:
博客园   IT新闻   Chat2DB   C++博客   博问