讓javascript中用innerHMTL新增的指令碼執行起來（轉）

atlantisholic發表於2011-11-24
JavaScript指令碼

前幾日在網上查詢為什麼innerHTML把內容加到div中不能執行指令碼的原因時，發現網上給出的程式有些複雜。在讀完jquery的原始碼之後，根據jquery的方式，做了如下處理，並通過了ie、 firefox、google chrome 、opera的測試。

 

  1. 把載入回來的資料以innerHTML的方式放入到一個動態生成的Div中；
  2. 建立一個文件片段，把Div中的子元素都AppendChild到片段中；
  3. 選出文件片段中的Script節點；
  4. 把文件片段中的非Script節點新增到頁面；
  5. 如果此節點存在src屬性，那就再一次請求此src，並取回內容；如果此節點不存在src屬性， 那就把此節點的文字內容取回；
  6. 取出DOM中的Head節點，再建立一個Script節點，設定節點Type屬性為Text/javascript型別；
  7. 把第5步中取出的內容，新增到第6步建立的Script節點中，並把此節點插入為Head節點的第一個子節點；
  8. 刪除Head節點中在第7步插入的Script節點;

實現

Js程式碼
  1. /**  
  2.  * 新增innerHTML到節點中  
  3.  * @param elem 節點  
  4.  * @param html HTMLCode  
  5.  */  
  6. JS.innerHTML = function( elem , html ){   
  7.     /* 生成一個動態 */  
  8.     var dynDiv = document.createElement( 'div' );   
  9.     /* 把內容都新增到此div中 , 因為如果第一個節點為script時ie會忽略此節點，所以就要上面加一個新節點 */  
  10.     dynDiv.innerHTML = 'for ie'+html;   
  11.     /* 取出動態div中的script節點 */  
  12.     var scripts = dynDiv.getElementsByTagName('script');   
  13.     /* 取出head節點，再新生成的節點新增到head中 */  
  14.     var head = document.getElementsByTagName('head')[0];   
  15.     /* 把script中的指令碼或要引入的外部 指令碼 */  
  16.     for( var i=0;i
  17.         var jsCode = '';   
  18.         /* 如果為外部指令碼，就再去載入資料 */  
  19.         if( scripts[i].src ){   
  20.             JS.ajax( {   
  21.                 url : scripts[i].src,   
  22.                 type : 'get',   
  23.                 success : function( respon ){   
  24.                     jsCode = respon.responseText;   
  25.                     evalJs( jsCode );   
  26.                 }   
  27.             } );   
  28.         /* 如果只是內部指令碼，就取出程式程式碼 */  
  29.         }else{   
  30.             jsCode = scripts[i].innerText || scripts[i].textContent || scripts[i].text || '';   
  31.             evalJs( jsCode );   
  32.         }   
  33.     }   
  34.     function evalJs( jsCode ){   
  35.         /* 新建一個script節點 */  
  36.         var scpt = document.createElement('script');   
  37.         scpt.type='text/javascript';   
  38.         scpt.text = jsCode;   
  39.         head.insertBefore( scpt ,head.firstChild );   
  40.         head.removeChild( scpt );   
  41.     }   
  42.     /* 刪除內容中的script節點 */  
  43.     for( var i=0;i
  44.         if( scripts[0].parentNode ){   
  45.             scripts[0].parentNode.removeChild( scripts[0] );   
  46.             i--;   
  47.         }   
  48.     }   
  49.     elem.innerHTML = dynDiv.innerHTML;   
  50. }  

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/23071790/viewspace-711955/，如需轉載，請註明出處，否則將追究法律責任。

相關文章