☰

innerHTML でスクリプトを挿入できますか? 質問する

tag-icon • tag-icon javascript html dom innerhtml
innerHTML でスクリプトを挿入できますか? 質問する

innerHTMLでを使用してページにスクリプトをいくつかロードしようとしました<div>。スクリプトは 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>

ベストアンサー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]);

おすすめ記事