CALTA Project

Javascriptのデバッグって、おそらく多くの方が、FirefoxのFirebugアドオンを使って行っていると思います。このデバッガは強力ですからね。で、デバッグが終わって、Firefoxで動作確認をしたものをIEで実行してみると、動かなかったってケースって多くないですか？
有名なケースでは、これ。

1
2
3
4
5

var  data ={
    item1 : "string1",
    item2 : "string2",
    item3 : "string3",
};

「”string3″」の後の「,」が元凶です。最後の「,」があると、IEでは動きません。この「,」を入れてしまったばっかりに、Firefoxではちゃんと動いていたものがまったく動かなくなってしまって、はまったという人は、ものすごく多いと思います。

ほかにも、いくつかの事例があると思いますが、ちょっとレアなものを発見したのでご紹介します。

1
2
3
4
5
6
7
8
9
10
11
12
13

<script type="text/javascript">
//< ![CDATA[
var  data ={
    item1 : "string1",
    item2 : "string2",
    item3 : "string3"
};
 
for  ( item in data ) {
    document.write ( data[item] + '＜br/＞' );
};
//]]>;
</script>

これってIEだと動きません。 もちろん、「”string3″」の後ろに「,」はありません。
for ～ in構文 は、オブジェクトのプロパティ名を列挙します。つまり、data.item1, data.item2, data.item3を順に出力することを意味してます。したがって、”string1″, “string2″, “string3″ という文字列が出力されます。

でも、IEだと動きません。オブジェクトエラーとなります。Firefox、Operaでは問題なく動くのですが。

こうしてみましょうか？

1
2
3

for  ( itm in data ) {
    document.write ( data[itm]　+ '＜br/＞' );
};

itemをitmに変えただけです。これは動きました。
# itemをitmに変えようという発想にいたるまで、かなり時間を要しました。

では、これはどうでしょう？

1
2
3
4

var item;
for  ( item in data ) {
    document.write ( data[item]　+ '＜br/＞' );
};

itemという変数を局所化してみました。
・・・動きます。

つまり、IEでは、大域変数itemが示すオブジェクトが存在するということにほかなりません。大域変数itemにオブジェクトのプロパティ名をセットしようとすると、オブジェクトエラーになるのですから。

では、このitemというオブジェクトの中身は何なのでしょう？さきほどの、for ～ in構文を使って、itemのプロパティを列挙してみました。

1
2
3

for  ( property in item ) {
    document.write( property + ':' + item[propery] + '＜br/＞' );
};

当然ですが、このコードはIEのみでしか動きません。
出力した結果をちょっと整形したら、itemはこのようなオブジェクトであることがわかります。

注）DontEnum 属性を持つプロパティはfor ～in構文では列挙できないため（詳しい解説）、これがitemの全貌ではないかもしれません。

このような事例にであうケースはそうそうないと思いますが、itemという変数を使用する際は注意した方がよいですね。

written by k-matsu
この記事へのトラックバックURL

ちょっと書き留めておきます。

その１.　IEの場合、DOMを使って動的にTBLタグを使う場合、TBODYタグを作ってあげないと表示されない。

1
2
3
4
5
6

var tbl = document.createElement("table");
var tr = document.createElement("tr");
var td= document.createElement("td");
td.appendChild(document.createTextNode("バスでお出かけ楽しいな"));
tr.appendChild(td);
tbl.appendChild(td);

↓

1
2
3
4
5
6
7
8

var tbl = document.createElement("table");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
var td= document.createElement("td");
td.appendChild(document.createTextNode("バスでお出かけ楽しいな"));
tr.appendChild(td);
tbody.appendChild(tr);
tbl.appendChild(tbody);

その２.　IEの場合、colspanをsetAttibuteで設定する場合、colspanでなくcolSpanとしないとダメ(Sは大文字) 。

1

td.setAttribute("colspan","2");

↓

1

td.setAttribute("colSpan","2");

その３.　Iframeのフレームの枠線を消す場合は、frameborderを0にすればよいが、IEの場合は、IframeをDOM で動的に作った場合、frameBorderにしないとダメ（Bは大文字)。

1
2
3

var  iframe = document.createElement("iframe");
iframe.src="http://example.com/hoge.html";
iframe.frameborder = 0;

↓

1
2
3

var  iframe = document.createElement("iframe");
iframe.src="http://example.com/hoge.html";
iframe.frameBorder = 0;

3つ目のやつは、ネット上からリソースが見つけられずはまった。

written by k-matsu
この記事へのトラックバックURL