可以使用内部 HTML 插入脚本吗？

javascript dom html innerhtml

2022-08-30 00:22:35

我试图使用.看起来脚本加载到DOM中，但它从未被执行（至少在Firefox和Chrome中）。有没有办法让脚本在插入它们时执行？innerHTML<div>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>

答案 1

下面是一个以递归方式将所有脚本替换为可执行脚本的方法：

function nodeScriptReplace(node) {
        if ( nodeScriptIs(node) === true ) {
                node.parentNode.replaceChild( nodeScriptClone(node) , node );
        }
        else {
                var i = -1, children = node.childNodes;
                while ( ++i < children.length ) {
                      nodeScriptReplace( children[i] );
                }
        }

        return node;
}
function nodeScriptClone(node){
        var script  = document.createElement("script");
        script.text = node.innerHTML;

        var i = -1, attrs = node.attributes, attr;
        while ( ++i < attrs.length ) {                                    
              script.setAttribute( (attr = attrs[i]).name, attr.value );
        }
        return script;
}

function nodeScriptIs(node) {
        return node.tagName === 'SCRIPT';
}

示例调用：

nodeScriptReplace(document.getElementsByTagName("body")[0]);

答案 2

您必须使用 eval（）来执行作为 DOM 文本插入的任何脚本代码。

MooTools会自动为您执行此操作，我相信jQuery也会这样做（取决于版本。这节省了解析标签和转义内容的大量麻烦，以及一堆其他“陷阱”。eval<script>

通常，如果您自己要使用它，则希望创建/发送脚本代码而不使用任何HTML标记，例如，因为这些标记将无法正常工作。eval()<script>eval()