我尝试使用 示例代码: null nullinnerHTML
将一些脚本加载到页面中。 脚本似乎加载到DOM中,但从未执行过(至少在Firefox和Chrome中是这样)。 有没有一种方法让脚本在用innerHTML
插入时执行?<!DOCTYPE html>
<html>
<body onload="document.getElementById('loader').innerHTML = '<script>alert(\'hi\')<\/script>'">
Shouldn't an alert saying 'hi' appear?
<div id="loader"></div>
</body>
</html>
您必须使用eval()来执行作为DOM文本插入的任何脚本代码。
MooTools将自动为您完成这一工作,我确信jQuery也会这样做(取决于版本,jQuery 1.6+版本使用eval
)。 这省去了解析标记和转义内容的大量麻烦,也省去了许多其他的“陷阱”。
通常,如果您自己要eval()
,您希望创建/发送不带任何HTML标记的脚本代码,例如,因为这些标记将无法正确地
eval()
。
下面是一个非常有趣的问题解决方案:http://24ways.org/2005/have-you-dom and-script-it-too
因此,使用此标记代替脚本标记:
下面是一个方法,它将所有脚本递归替换为可执行脚本:
function nodeScriptReplace(node) {
if ( nodeScriptIs(node) === true ) {
node.parentNode.replaceChild( nodeScriptClone(node) , node );
}
else {
var i = 0;
var children = node.childNodes;
while ( i < children.length ) {
nodeScriptReplace( children[i++] );
}
}
return node;
}
function nodeScriptIs(node) {
return node.tagName === 'SCRIPT';
}
function nodeScriptClone(node){
var script = document.createElement("script");
script.text = node.innerHTML;
for( var i = node.attributes.length-1; i >= 0; i-- ) {
script.setAttribute( node.attributes[i].name, node.attributes[i].value );
}
return script;
}
示例呼叫:
nodeScriptReplace(document.getElementsByTagName("body")[0]);