日期:2014-05-16  浏览次数:20311 次

让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节点;

实现

/**
 * 添加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;
}

?