IEではinnerHTMLで取得したOBJECTタグがおかしい
flashを生成するのに
<div id="swfArea">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0
" width="350" height="350" id="desktop" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="wmode" value="transparent" />
<param name="movie" value="test.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#faf8f3" />
<param name="flashvars" value="test=123" />
</object>
</div>
こんなHTMLがあったとして、
alert(document.getElementById("swfArea").innerHTML);
ってやると
身に覚えの無いparamがごっしゃり出てきて
そればかりか
flashvarsの値が消えてしまっています！！
なので、もし<div id="swfArea">のなかになにか追記したい場合は
document.getElementById("swfArea").innerHTML +=
とかやってしまうと
swfに渡すべきflashvarsも消えてしまいますので
appendChildを使うようにしましょう。
IEでのラジオボタンの挙動
ラジオボタンのchecked をtrueにしても、
そのラジオボタンをどこかにappendChildしたらはずれてた。IEのみ。
defaultChecked なら、引き継がれた模様。
これは、もともとhtmlに記述してたラジオボタンの話です。
ためしに、ラジオボタン自体をJSで作って実験してみた。
そうすると、
またもcheckedが効いてないばかりか、labelをクリックしても反応しないし、
さらにはラジオボタン自体をクリックしてもチェックがつかないという有様でした
FFではちゃんと動いてるのになー。
なんかコード間違ってる？？
window.onload=function(){
var testArea = document.getElementById('testArea');
var radio = document.createElement('input');
radio.type="radio";
radio.value="test";
radio.id="test";
radio.name="radioTest";
radio.checked = true;
var label = document.createElement('label');
label.htmlFor="test";
label.innerHTML="テスト1";
testArea.appendChild(radio);
testArea.appendChild(label);
var radio2 = document.createElement('input');
radio2.type="radio";
radio2.value="test2";
radio2.id="test2";
radio2.name="radioTest";
var label2 = document.createElement('label');
label2.htmlFor="test2";
label2.innerHTML="テスト2";
testArea.appendChild(radio2);
testArea.appendChild(label2);
}
※htmlには
<div id="testArea"></div>
って記述しておく。
onload処理について
window.onloadとdocument.body.onloadはブラウザ によって挙動がごちゃごちゃ・・・
function bodyOnloadTest(){ alert("bodyのonload");}
<body onload="bodyOnloadTest();">
こう書いてた場合、どうなるでしょう？
IE,FF,Safariでは、ページ表示すると
「bodyのonload」のみアラートがでます。
つまりwindow.onloadは、bodyタグで実行したbodyOnloadTest()に上書きされるようです。
しかしOpera の場合、
「bodyのonload」のアラートが出た後に「windowのonload」のアラートも出る。
windowとbodyでそれぞれのonloadは別物ってこと？
さらに、そのonload処理を上書きするテストで、こんなfunctionを作ってみたところ…
function override(){
var windowOnloadFunc = window.onload;
var bodyOnloadFunc = document.body.onload;
windowOnloadFunc();
bodyOnloadFunc();
alert("追加の処理");
}
これを適当にAタグのonclickかなんかから実行するとどうなるか？
【IEの場合】
「bodyのonload」//←windowOnloadFunc();の実行結果
「bodyのonload」//←bodyOnloadFunc();の実行結果
「追加の処理」 //←alert("追加の処理");の実行結果
と３つアラートがでます。
【Firefoxの場合】
「bodyのonload」//←windowOnloadFunc();の実行結果
のアラートが出た後に、
bodyOnloadFunc();でコケます。
document.body.onloadはFFではundefinedが返ってくるようで・・
まー結局windowOnloadFunc();とbodyOnloadFunc();の実行結果は同一なので
（window.onloadはbodyのonloadに上書きされてるから）、
FirefoxでエラーになるbodyOnloadFunc();を抜いちゃえばonloadの追加処理はできますが
ちなみにSafariもFirefoxと同様の結果でした。
【Operaの場合】
「windowのonload」//←windowOnloadFunc();の実行結果
「bodyのonload」//←bodyOnloadFunc();の実行結果
「追加の処理」 //←alert("追加の処理");の実行結果
とのアラート。
やっぱりwindowとbodyでそれぞれのonloadは別物なのか・・
というわけで、ブラウザでばらばら。
なので、onload処理はどっちかに統一した方が混乱がなさそー。でも、たくさん外部JSを読み込んでいる場合
それぞれの外部JSがwindow.onloadとか書いてしまうと上書き合戦になってしまうし、
attachEvent/addEventListenerを使ったとしても、上書きはしないもののどこで何やってるかわからなくなりそう。
というわけで、
window.onloadは外部JSではなく必ずhtml上に1箇所にまとめて書く
とか
bodyタグのなかのonload=にセミコロン区切りで処理を列挙する
とかのルールにしておくのが
onload処理を俯瞰できると言う意味ではいちばんわかりやすいかなあと思ってるんですが
どうでしょう。