« IE7と補助漢字(「森鴎外」と「森鷗外」) | トップページ | SafariとAjax文字化け »

2006/11/14

Mac版IEとinnerHTML



フレッツADSL半年間 525円! JRのプロバイダ【サイバーステーション】

久しぶりのMac版IEネタである。なぜ、そんなことをする必要があるのかと聞かれると困るのですが、Mac版IEでのみ、下記のスクリプトは期待どおりには動作しません。

dr_macie.jsのソース

dr.htmlのソース

Mac版IEを除く主要ブラウザでは、全て、期待どおり、

かきくけこ
あいうえお

という出力になります。

しかし、Mac版IEでは、

かきくけこ
かきくけこ
あいうえお

になります。つまり、<script type="text/javascript" src="dr_macie.js"></script>が2回評価されてしまいます。
なぜこうなるかといいますと、Mac版IEだけでなく、Windows版IEやFirefox、Operaで、「document.getElementById("dr_a").innerHTML=document.getElementById("dr_b").innerHTML;」の部分を「alert(document.getElementById("dr_b").innerHTML);」にしてみるとよく分かります。

 アルファベットの大文字・小文字・ダブルクォートのあるなしも忠実にまとめてあります。
Windows版IE<SCRIPT src="dr_macie.js" type="text/javascript"></SCRIPT>かきくけこ<BR>
Windows版Firefox<script type="text/javascript" src="dr_macie.js"></script>かきくけこ<br>
Windows版Opera<SCRIPT type="text/javascript" src="dr_macie.js"></SCRIPT>かきくけこ<BR/>
Mac版IE<SCRIPT src=dr_macie.js type="text/javascript"></SCRIPT>かきくけこ<BR>
Safari<SCRIPT type="text/javascript" src="dr_macie.js"></SCRIPT>かきくけこ<BR>
Mac版Firefox<script type="text/javascript" src="dr_macie.js"></script>かきくけこ<br>


細かい違いはあるものの、どのブラウザもdocument.getElementById("dr_b").innerHTML;の結果はほぼ同じです。しかし、これを他のオブジェクトのinnerHTMLとして評価するように書くと、Mac版IEだけ、この<SCRIPT src=dr_macie.js type="text/javascript"></SCRIPT>を再実行しようとします。そのため、「かきくけこ<br>」が2回、document.writeされる結果になります。もちろん、document.writeだけでなく、alertでも同じです。たとえば、Mac版IEの場合、dr_macie.jsの中身が

のようにあった場合、最初の実行時にcountは定義されていないのでゼロになり、それがインクリメントされて「1」がalertされます。さらに、2回目の実行時では、今度はグローバル変数であるcountが定義済みのため、count=1;にインクリメントされる形となり、「2」がalertされる結果となります。そして、「かきくけこ<br>」が2回、document.writeされる結果になります。他のブラウザではこのようなことは起こりません。

「display:none;」というスタイルシートは、あくまでも表示に関するものですから、document.write以外のもの(ここではalert)は、最初のロード時に評価されます。しかし、その後、innerHTMLでコピーされるときには再実行されてはならないはずですが、Mac版IEだけ2回目を実行してしまいます。

|

« IE7と補助漢字(「森鴎外」と「森鷗外」) | トップページ | SafariとAjax文字化け »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/67411/12686090

この記事へのトラックバック一覧です: Mac版IEとinnerHTML:

« IE7と補助漢字(「森鴎外」と「森鷗外」) | トップページ | SafariとAjax文字化け »