innerHTMLへscriptタグを突っ込んでscriptタグ内部のJavaScriptをキックする方法

JavaScript

オブジェクト中に単に突っ込むだけで実行されると思ってたんですけど。うんとも寸とも言わないので試行錯誤したメモ。

オブジェクト中にscriptタグで挟んだJavaScript突っ込むとDOMとしてパースはしてくれてるようなのだけどキックはしてくれない。alertを仕込んでも鳴らない、functionを仕込んでも定義されていない、という状態。そこにコードとしては書かれているのだけどキックされない。

IE Firefox編

最終的にこんなコードになった。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="Content-Type" content="text/html;charset=UTF-8" />
    <title>タイトルです</title>
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <script  type="text/javascript">
//<![CDATA[
function init(){	
	var aaa = document.createElement("div");
	aaa.innerHTML = '&nbsp;<script defer="defer">alert("a");<' + '/script>';
	document.getElementById('hoge').appendChild(aaa) ;
}

//]]>
    </script>
</head>
<body onload="init();">
<div id="hoge"></div>
</body>
</html>

一発内部で別の要素の中に突っ込んでからそのDOMとしてブラウザのツリーにぶら下げてやるとキックされる。

FirefoxはこれでいいんだけどIE対応にするためにscriptタグの前にスペースと defer　属性を設定しないといけない。これはこれで問題があるようなんだが・・・

できると思ったことがちょっとできないとガッツリ詰まりますね。

Opera Safari編

さて↑の方法ではOperaとSafariが動きません・・・どうしようかと思案した挙句scriptタグ内部を切り出して、新たなscriptタグをcreateElementし、本体からはscriptタグを除去して、innerHTML、その後head要素に切り出したscriptをぶら下げるという方式をとった。

これで４つのブラウザどれでも動作するようにはなるが・・・まぁ本質てきには全然別物ですね・・・