PSI Labs RSS feed

古いIE + javascript のハマりどころまとめ

こんにちは、tomita です。

さて、2014年に Window XP のサポートが切れるということで、そろそろ 古いIE の呪縛からオサラバしたいところですが、そうはいかないのが現状、まだしばらくは古い IE の面倒を見る必要がありそうですね...

ということで、過去に遭遇した IE + javascript でのハマりどころをまとめてみます。

オブジェクトリテラルの最後にカンマがあると動かない (IE6,7)

これは割と有名な話ですね。以下は IE6,7 では動作しません。

<script type="text/javascript">
var data = { a:1, b:2, c:3, }; // IE6,7 で Syntax Error
</script>

配列リテラルの最後にカンマがあるとバージョンごとに要素数が変わる (IE全般)

こちらはIEのバージョンによって動作が変わります。
以下の場合、IE6~8では「4」、IE9以降では「3」がアラート表示されます。

<script type="text/javascript">
var data = [1, 2, 3, ];
alert(data.length); // IE6~8は「4」, IE9以降は「3」
</script>

document.getElementById( input.name ) でアクセスできる (IE6,7)

以下の場合、IE6,7 では「test!」がアラート表示されます。これはエラーになるべきですよね....

<input type="text" name="abc" value="test!" />
<script type="text/javascript">
alert( document.getElementById('abc').value );
</script>

<script type="application/javascript"> は無視される(IE6,7,8)

script タグの type に「application/javascript」が指定できるのは IE9以降 のようです。
以下の場合、IE6~8では「1」しかアラート表示されません。

<script type="text/javascript">alert(1);</script>
<script type="application/javascript">alert(2);</script> <!-- IE6~8では動かない -->

scriptタグ の onerror が効かない (IE6,7,8)

script.onerror は使わない方がよさそうです。以下は IE6~8 では動きません。

<script type="text/javascript" src="notfound.js" onerror="alert('読込エラー')"></script>

オブジェクトのキーが勝手にソートされる(IE7以降)

以下を実行すると、IE6の場合は「ABあいう」の順でアラート表示されますが、IE7以降では「ういあAB」の順でアラート表示されます。
IE以外のモダンブラウザでも「ういあAB」の順で表示されるため、内部で勝手にソートされているようです。

<script type="text/javascript">
var data = {
  'a':'A',
  'b':'B',
  '9':'あ',
  '8':'い',
  '7':'う' 
};
for( var k in data ){
  alert( data[k] );
}
</script>

------

他にもまだまだあるかもしれませんが、とりあえずこんなところで...

それでは~