クロスブラウザ対応は大変

ソフトウェア Ajax

以前、自分の為に作ったyoutubeをループ再生するやつだが、
ちょっとWindowsで見て見たところ、IEでは動かなかった。
なぜだーと調べたところ、


1.DOMのsetAttribute (イベント関連)の指定の仕方が違う。
2.同じく、DOMでclassの指定の仕方が違う。
3.IE6はinnerHTMLにバグがある。


ことが判明。
その解決法をご紹介。


まず、1
Firefoxでは、
div.setAttribute("onmouseout", "this.style.backgroundColor='#FFFFFF';");
でOKなのだが、IEではNG。
new Function()でかこってやる必要がある。
div.setAttribute("onmouseout", new Function("this.style.backgroundColor='#FFFFFF';"));


次、2
Firefox:
div.setAttribute("class", "video");
IE:
div.setAttribute("className", "video");
とclassNameにしてやらないといけない。


でもって、1、2は処理を分岐させる必要があるので、
var isMSIE = /*@cc_on!@*/false;
を書いておいて、
if (isMSIE)
で分岐させればOK。


最後、3これが一番手間取った。
つまるところ、div.innerHTML = flashタグ
とはできないので、
DOMを駆使して突っ込む必要がある。
DOM化は大変なので、DOM Toolを使う。
が、embedタグを突っ込むことができない。
なんでだーと検索したところ、
http://muffinresearch.co.uk/code/javascript/DOMTool/
で、その原因についてかかれているようだ。
良く見てないので、なんでかは分からんのだがw


とりあえず、対策として、
object = [embed以外のDOM]
embed = [embedのみのDOM]

var span = document.createElement("span");
span.appendChild(embed);
div.appendChild(object);
div.replaceChild(span, object);
と、spanタグを介して突っ込んでやるとうまくいくようだ。


ということで、クロスブラウザ化できた。