SWFObject.js を使っていて気が付いたのですが,
IE では 以下のような処理で、(element).innerHTML がどうもうさんくさい動作をします。
(検証バージョン: Internet Explorer Version 6.0)
<span id=”exp_object_tag”>
<object id=”foo” classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=”100%” height=”100%”>
<param name=”movie” value=”foo.swf” />
<param name=”bgcolor” value=”#CCCCFF” />
<param name=”quality” value=”high” />
<param name=”scale” value=”noscale” />
<param name=”flashvars” value=”message=hello” />
</object>
</span>
<script type=”text/javascript”>
//<![CDATA[
alert(document.getElementById(“exp_object_tag”).innerHTML);
//]]></script>
このコードを含むHTMLの表示結果は、単純にソースのまま表示されるという一般的な期待に反して次のようになります。
(注:実際は改行はありませんが、見やすさのため改行をいれてあります)
<OBJECT id=sotester height=”100%” width=”100%” classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000>
<PARAM NAME=”_cx” VALUE=”5080″>
<PARAM NAME=”_cy” VALUE=”5080″>
<PARAM NAME=”FlashVars” VALUE=””>
<PARAM NAME=”Movie” VALUE=”so_tester.swf”>
<PARAM NAME=”Src” VALUE=”so_tester.swf”>
<PARAM NAME=”WMode” VALUE=”Window”>
<PARAM NAME=”Play” VALUE=”-1″>
<PARAM NAME=”Loop” VALUE=”-1″>
<PARAM NAME=”Quality” VALUE=”High”>
<PARAM NAME=”SAlign” VALUE=””>
<PARAM NAME=”Menu” VALUE=”-1″>
<PARAM NAME=”Base” VALUE=””>
<PARAM NAME=”AllowScriptAccess” VALUE=””>
<PARAM NAME=”Scale” VALUE=”NoScale”>
<PARAM NAME=”DeviceFont” VALUE=”0″>
<PARAM NAME=”EmbedMovie” VALUE=”0″>
<PARAM NAME=”BGColor” VALUE=”FF66FF”>
<PARAM NAME=”SWRemote” VALUE=””>
<PARAM NAME=”MovieData” VALUE=””>
<PARAM NAME=”SeamlessTabbing” VALUE=”1″>
<PARAM NAME=”Profile” VALUE=”0″>
<PARAM NAME=”ProfileAddress” VALUE=””>
<PARAM NAME=”ProfilePort” VALUE=”0″>
<PARAM NAME=”AllowNetworking” VALUE=”all”>
<PARAM NAME=”AllowFullScreen” VALUE=”false”>
</OBJECT>
時動的にパラメータを追加するのはともかく、
<PARAM NAME=”FlashVars” VALUE=””>
とされてしまうのはいただけません。
なお、 += オペレータでも同様の現象が発生するため、次のようにすると FlashVars でパラメータが渡せなくなってしまい、不具合の原因になります。
document.getElementById(“exp_option_tag”).innerHTML += “Break it!!”;
参考:
– innerHTML Property (MSDN)
– Can’t pass innerHTML to Internet Explorer containing <param ../>(mootools forums)