您的位置:首页 > Web前端 > JavaScript

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

2012-02-21 12:27 323 查看
把加载回来的数据以innerHTML的方式放入到一个动态生成的Div中;

创建一个文档片段,把Div中的子元素都AppendChild到片段中;

选出文档片段中的Script节点;

把文档片段中的非Script节点添加到页面;

如果此节点存在src属性,那就再一次请求此src,并取回内容;如果此节点不存在src属性, 那就把此节点的文本内容取回;

取出DOM中的Head节点,再创建一个Script节点,设置节点Type属性为Text/javascript类型;

把第5步中取出的内容,添加到第6步创建的Script节点中,并把此节点插入为Head节点的第一个子节点;

删除Head节点中在第7步插入的Script节点;

实现

Js代码

/**

* 添加innerHTML到节点中

* @param elem 节点

* @param html HTMLCode

*/

JS.innerHTML = function( elem , html ){

/* 生成一个动态 */

var dynDiv = document.createElement( 'div' );

/* 把内容都添加到此div中 , 因为如果第一个节点为script时ie会忽略此节点,所以就要上面加一个新节点 */

dynDiv.innerHTML = '<span >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;

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: