ホーム > JavaScript

JavaScript アーカイブ

JqueryでslideDown()系のメソッドをコールした時のアレ

Jquery の slideDown() メソッドで表示した要素はブロック要素になるので IE と gecko で以下のように処理を分ける。

if(navigator.systemLanguage){
	$('#tableID').slideDown('normal');
}else{
	$('#tableID').slideDown('normal',function(){$('#tableID').css('display','table')});
}

解説

gecko エンジンの場合はコールバックで slidedown() した要素の display に table を指定する。
IE エンジンでこれをやるとエラーになるので、IE の場合はコールバックしない。

IEでmargin: 0 auto;する方法

IE でボックス要素に margin: 0 auto; を指定しても中央寄せとならない件について、expression をつかって解決してみた。
もちろん valid ではないしそもそも Javascript がオフでは閲覧に支障をきたすようなウェブサイトでなければ使用できないが、僕はこの方法をよく使う。

margin: expression( (function(e){
    var result;
    var ep = e;
    do{
        if(ep.parentNode.className == "container"){
            return "0 "+((document.body.clientWidth - ep.offsetWidth) / 2) + "px";
        }else{
            var ep = ep.parentNode;
        }
    }while(ep.parentNode);
})(this));

解説

上記スクリプトの環境は body 要素の子要素のクラスが container となっている。
要するに自分の親要素のクラスが container ならばウィンドウの width から自分の width を引いた数値を半分にした数値を margin の左右に指定している。
body に直接な場合は if 文で tagName を評価すればよい。

Expression 句

スタイルシート上でスクリプトを実行する。
expression でもイベントオブジェクトは参照可能。
ただ、IE の環境で Javascript をデバッグするには Microsoft office 製品に同梱されている Microsoft Script Editor くらいしか僕は知らないのだけど、これでも内部で呼び出されるためウォッチ式などでウォッチすることはできない。

Firefox が出てモダンブラウザ向けのクライアントサイドスクリプトのデバッグ環境は劇的に進化したと思うのだけど、ウェブで飯を食ってるとモダンブラウザマンセーではやっていけない。
心ひそかに IE でのデバッグ環境の進化を期待していたのだけど、どうやら Microsoft からそういうアレが出たらしい。

Microsoft Expression
とりあえず時間が出来たら評価版をさわってみよう。

もっと細っかい解説

※3/26追記

margin: expression( (function(e){
    ~
})(this) );

この記述を分解して expression をイベントに見立てると

expression = function(e){
    ~
}

みたいな形になります。で、expression の返り値が margin に反映する、と。
(this) で expression にアタッチした function(e){ ~ } を呼び出してるような感じ。
因みにレンダリング時に呼び出しているようなので、呼び出し元の要素はスタイルが適用される要素になるみたい。

IEでXMLHttpRequestすると改行が反映されない件

IE で XMLHttpRequest してファイルを読み込み、それをそのまま表示させようとすると改行が反映されないんですね。下のコードみたいなやり方だと改行がスペースになってます。

var obj = new ActiveXObject("Msxml2.XMLHTTP");
obj.open('GET', fileName, true );
obj.onreadystatechange = function(){
	if(obj.readyState==4){
		document.getElementById('result').innerHTML = obj.responseText;
	}
obj.send();

これは XMLHttpRequest で改行がスペースに変換されてしまうの?と IE の XML に関する仕様を読んで一瞬思ったのですが、alert で表示させると改行されてるし、escape したものを表示させるとちゃんと %0D%0A と改行コードが含まれてる。

ってことは取得した時点では改行コードが含まれているわけだから、innerHTML に渡したところでおかしくなっているとしか考えられない。

document.getElementById(‘result’) が textarea 要素だとした場合そもそも innerHTML じゃ(できるけど)意味合い的におかしい。textarea 要素だから createElement して appendChild も・・・・というわけで createTextNode して appendChild してみたら出来た。そういうことか。

まとめ

  • IE の場合 innerHTML の挙動が FireFox なんかと違うみたい。
  • IE の場合 createTextNode でインスタンス生成してから appendChild しても読み込んだ文字リテラルに含まれる改行コードに CR が含まれていないと改行にならない。(CR か CRLF)
  • FTP クライアントによっては Ascii モードでの送信時に改行コードが自動変換される場合がある

textarea 要素じゃなくても文字リテラルを表示させる場合は createTextNode → appendChild がすっきりしてよろしいように思える。

ホーム > JavaScript

カテゴリー

ページの上部に戻る