让javascript中用innerHMTL添加的脚本运行起来（转）

前几日在网上查找为什么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. }  

/**
 * 添加innerHTML到节点中
 * @param elem 节点
 * @param html HTMLCode
 */
JS.innerHTML = function( elem , html ){
	/* 生成一个动态 */
	var dynDiv = document.createElement( 'div' );
	/* 把内容都添加到此div中 , 因为如果第一个节点为script时ie会忽略此节点，所以就要上面加一个新节点 */
	dynDiv.innerHTML = 'for ie'+html;
	/* 取出动态div中的script节点 */
	var scripts = dynDiv.getElementsByTagName('script');
	/* 取出head节点，再新生成的节点添加到head中 */
	var head = document.getElementsByTagName('head')[0];
	/* 把script中的脚本或要引入的外部 脚本 */
	for( var i=0;i

 

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/23071790/viewspace-711955/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/23071790/viewspace-711955/