インラインJSの動的ロード

　とある用件で、特定の機能をHTMLが読み込まれたあとで遅延ロードしなければならないことになったので対応メモとか。

　遅延ロード自体はJSのsetTimeout()を使えばいいので、外部JSを読み込むときなんかは

<script type="text/javascript">
function loadScript(){
    var testScript = document.createElement('script');
    testScript.type = "text/javascript";
    testScript.src = "http://example.com/test.js"
    document.body.appendChild(testScript);
}
setTimeout('loadScript()', 300);
</script>

　な感じで大丈夫なんだけど、インラインJSにしたい場合はちょっと細工が必要。testScript.innerHTMLだとIE系が動作しないのと、testScript.textだとSafariが動作しなかったりする。なので、手抜きだけどこうしてみた。

<script type="text/javascript">
function loadScript(){
    var testScript = document.createElement('script');
    testScript.type = "text/javascript";
    if(document.all){
        testScript.text = "alert("test");";
    }else{
        testScript.innerHTML = "alert("test");";
    }
    document.body.appendChild(testScript);
}
setTimeout('loadScript()', 300);
</script>

　とりあえずこれで大丈夫っぽ。ちなみに軽く調査した結果こんなんでした。

target	IE5	IE6	FF3	Safari1.3.2	Safari3
.innterHTML	×	×	○	○	○
.text	○	○	○	×	×