让javascript顶用innerHMTL添加的脚本运行起来

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

前几日在网上查找为什么innerHTML把内容加到div中不能运行脚本的原因时，发现网上给出的程序有些复杂。在读完jquery的源代码之后，根据jquery的方式，做了如下处理，并通过了ie、 firefox、google chrome 、opera的测试。

?

把加载回来的数据以innerHTML的方式放入到一个动态生成的Div中；创建一个文档片段，把Div中的子元素都AppendChild到片段中；选出文档片段中的Script节点；把文档片段中的非Script节点添加到页面；如果此节点存在src属性，那就再一次请求此src，并取回内容；如果此节点不存在src属性，?那就把此节点的文本内容取回；取出DOM中的Head节点，再创建一个Script节点，设置节点Type属性为Text/javascript类型；把第5步中取出的内容，添加到第6步创建的Script节点中，并把此节点插入为Head节点的第一个子节点；删除Head节点中在第7步插入的Script节点;

实现

/** * 添加innerHTML到节点中 * @param elem 节点 * @param html HTMLCode */JS.innerHTML = function( elem , html ){/* 生成一个动态 */var dynDiv = document.createElement( 'div' );/* 把内容都添加到此div中 , 因为如果第一个节点为script时ie会忽略此节点，所以就要上面加一个新节点 */dynDiv.innerHTML = '<span style="display:none;">for ie</span>'+html;/* 取出动态div中的script节点 */var scripts = dynDiv.getElementsByTagName('script');/* 取出head节点，再新生成的节点添加到head中 */var head = document.getElementsByTagName('head')[0];/* 把script中的脚本或要引入的外部 脚本 */for( var i=0;i<scripts.length;i++ ){var jsCode = '';/* 如果为外部脚本，就再去加载数据 */if( scripts[i].src ){JS.ajax( {url : scripts[i].src,type : 'get',success : function( respon ){jsCode = respon.responseText;evalJs( jsCode );}} );/* 如果只是内部脚本，就取出程序代码 */}else{jsCode = scripts[i].innerText || scripts[i].textContent || scripts[i].text || '';evalJs( jsCode );}}function evalJs( jsCode ){/* 新建一个script节点 */var scpt = document.createElement('script');scpt.type='text/javascript';scpt.text = jsCode;head.insertBefore( scpt ,head.firstChild );head.removeChild( scpt );}/* 删除内容中的script节点 */for( var i=0;i<scripts.length;i++ ){if( scripts[0].parentNode ){scripts[0].parentNode.removeChild( scripts[0] );i--;}}elem.innerHTML = dynDiv.innerHTML;}

?