日期:2014-05-16 浏览次数:20426 次
前几日在网上查找为什么innerHTML把内容加到div中不能运行脚本的原因时,发现网上给出的程序有些复杂。在读完jquery的源代码之后,根据jquery的方式,做了如下处理,并通过了ie、 firefox、google chrome 、opera的测试。
?
实现
/**
* 添加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;
}
?