lastmod: 2008-10-25 (土) 19:05:47
Tag: flash JavaScript blogparts
IE †
position: fixed非対応な件 †
- 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で連動させるようにするとうまく動く。
- 関連ページ
- ExternalInterface668日前
ツールボックス
katapad.com
タグ
メニュー
- Pukiwikiとは
- SandBox
- WikiName
- InterWikiName
- WikiEngines?
- FormattingRules
