innerHTMLでdocument.writeする - その2

XMLHttpRequestで取得したHTMLをそのままinnerHTMLに挿入してそこにあるscriptもついでに実行したい場合には役に立つはずです。

って自分で書いていて実際にinnerHTMLにscriptを挿入して動かないっていうサンプルを公開していたのでそれを正常に動くようにしていみました。

ソース

function postrender(target)
{
    var i, f, script, temp = document.write;
    var scripts = target.getElementsByTagName('script');

    document.write = function()
    {
        var i, f, span, b = [];
        for(i=0,f=arguments.length;i<f;i++) b[i] = arguments[i];
        span = document.createElement('span');
        span.innerHTML = b.join('');
        script.parentNode.insertBefore(span, script);
    };

    for(i=0,f=scripts.length;i<f;i++)
    {
        script = scripts[i];
        eval(script.text)
    };

    document.write = temp;
};

使い方

innerHTMLを実施した後でscript要素を再評価したいHTMLエレメントを渡してあげる。具体的にはこう。

var foo = document.getElementById('foo');
foo.innerHTML = "<script>document.write('<b>Hello!!</b>')</script>";
postrender(foo);

こういう結果になった

ちなみにjavascriptやjavascript_charcode以下には<script>〜</script>が挿入されています。

とりあえず

HTMLを評価させる為にダミーのspan要素を作成している点以外は問題ないでしょう。きっと。