innerHTMLでスクリプトする為のバッドノウハウ

JavaScript DOM

ところで

jQuery#html()にscriptを突っ込んでもJSを実行してくれます。document.writeを利用するとひどいことになりますけど(--;

$("#foo").html("<script>alert('Hello');<"+"/script>");

innerHTMLでscriptする為の方法

document.getElementById("foo").innerHTML =
    "Hello<script>document.write('World!!')<"+"/script>";

innerHTMLにscriptタグを追加して動作させる為の方法です。innerHTMLに代入したときにevalとか実行するのでかなりのバッドノウハウです。script deferとかやらない方法です(昔の記事のリプリントです)。

こんな関数用意
function exeScript(element)
{
    // document.write関数を上書き用
    function writer(script){
        return function(){ script.insertAdjacentHTML('beforeBegin', Array.prototype.join.call(arguments, '')); };
    };

    // オリジナルのdocument.writeの退避
    var temp = document.write;

    // 指定された要素のscriptオブジェクトの取得
    var i, f, script, scripts = element.getElementsByTagName('script');

    // 上で取得したscriptの実行
    for(i=0,f=scripts.length;i<f;i++)
    {
        script = scripts[i];
        if(script.text)
        {
            // document.writeの上書き
            document.write = writer(script);

            // 取得したJSを実行。evalのほうがいいと思いますが(--;
            (new Function(script.text))();
        };
    };

    script = null;
    scripts = null;

    document.write = temp;
};

FirefoxにはinsertAdjacentHTMLがないので、簡単の為にinsertAdjacent.js(http://d.hatena.ne.jp/shogo4405/20070405/1175776629)を使いました。

こんな感じで
document.getElementById("foo").innerHTML =
    "Hello<script>document.write('World!!')<"+"/script>";

exeScript(document.getElementById("foo"));

Hello World!!になるはずです。

まとめ
  1. innerHTMLにscriptを代入する。
  2. scriptノードは構築されているので、ノード内のJSをかき集める。
  3. 集めたtextを(new Function())()かevalしたら一応スクリプトが動いたことになる。

参考文献