クロスブラウザでの注意点

lastmod: 2008-10-25 (土) 19:05:47
Tag: flash JavaScript blogparts

IE †

position: fixed非対応な件 †

1. position: absolute

   ターゲットのdiv.style.top = document.documentElement.scrollTop

これだけだと、無限スクロールになるので対処が必要

DOMツリー構築中に要素を追加すると閲覧できなくなる †

ブログパーツ設置場所にこんな風に書いてるとIEで死にます。もともとのscriptに無理があるので仕方がない。

<script type="text/javascript">
(function(){
   document.write("<div id ='$wrap_div_id'><div id='$swf_div_id'>testdes</div></div>");
   var d=document;
   var s=d.createElement("script");
   s.charset="utf-8";
   s.src="$path?"+(new Date()).getTime() + "#user_id=$user_ID";
   d.body.appendChild(s);
})();
</script>

これを実行すると以下のエラーとともにIEで表示されなくなる。

インターネットサイトを開けません。操作は中断されました。

原因 †

IEではDOMツリー構築中にappendすると死んでしまう。

なので、DOMツリー構築中はappendせずに、それ以外のときを狙ってゴニョったらいい。

回避方法1：onloadイベントを待つ †

回避するにはDOMツリーが構築されたあとに実行すればよい。window.onloadにaddEventする

addEventはIEとそれ以外で実装方法が異なるので、それに気をつける。

if (obj.addEventListener){
   obj.addEventListener(evType, fn, false);
   return true;
 } else if (obj.attachEvent){
   var r = obj.attachEvent("on"+evType, fn);
   return r;
 }

回避方法2：document.writeを使う †

古典的だがこっちのほうが簡単。

ViewPort?サイズの取得方法 †

ここに書いてあった。http://hisasann.com/housetect/2008/07/jquery_2.html

IEの互換モードでもうまく動くように書いてある。

function getViewPortSize()  
{  
	return {  
		width: window.innerWidth || (document.documentElement && document.documentElement.clientWidth) || document.body.clientWidth,  
		height: window.innerHeight || (document.documentElement && document.documentElement.clientHeight) || document.body.clientHeight  
	};  
}

JSからSWFへcallするときのSWFの取得方法 †

IEとそれ以外で仕様がことなるので、ExternalInterfaceで渡すときに取得するのはこっちで

function getSwf(id) 
{
	return navigator.appName.indexOf("Microsoft") != -1 ? window[id] : document[id];
}

ブラウザからSWFにフォーカスを与える †

このトピックはblogparts以外でも使える。

フォーカス用のswf取得方法はgetElementById?でもいいかも。でも面倒やから上のgetSwf()を使うかな。

getSwf(swfID).focus();

これを書くだけでいちいちswfをクリックしてコントロールをブラウザから渡すことがなくなる。blogpartsでなくとも、普通のサイトでもwindow.onloadかDOM構築完了時にフォーカスするだけで、ユーザビリティ高められそう。

onBlurも付け加えるとフォーカスが外れないようにできると思ったけど… †

ジャック型のSWFはたいがいtransparent指定をするので、ちょっとしたマウス操作でブラウザにフォーカスが戻ってしまう。

なので、onblurイベントを拾って絶対にフォーカスが外れないようにしてみる

var swf = getSwf(swfID);
swf.focus();
swf.onblur = function(){swf.focus()};

うまく動かないじゃねーか

Firefox2でレイヤーを複雑にするとマウスの反応が著しくおかしくなる †

こんな感じのレイヤーにするとおかしくなった。上からz-index順

• JACK型のブログパーツ（swfはwmode=transparent)。position: fixed
• LightBox?のようなオーバーレイのレイヤーをposition: fixed
• ふつうのhtmlレイヤー

こういう形にするとマウスの反応がうまくいかない。z-indexが利いていない？

原因 †

• たぶんjackのtransparentをやめればうまくいくはずだが、jack型の特性上それは難しい
• オーバーレイのpositionをfixed以外にするとうまく動く

回避策　オーバーレイをposition: absoluteにする †

IEと同じようにオーバーレイをabsoluteにして、onScrollで連動させるようにするとうまく動く。

関連ページ

1. ExternalInterface668日前