Getting Things Done!

大きな夢は目の前にある1つ1つの小さなことをこなしてこそ達成される

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

スポンサー広告 |

IE7でjavascriptのappendChildが失敗する

DOMのエレメントの解釈がブラウザごとにまちまちなのは理解していたけど、
今回のIE7のバグは非常に腹立たしいものです。

javascriptで以下のようなコードを書いていました。


function hoge() {
this.div = document.createElement('div');
this.divに対してうにゅうにゅ
var body = document.getElementsByTagName('body')[0];
body.appendChild(this.div);
}


ループの中で上記のコードを複数実行していると1回目は成功するのですが
2回目には失敗してブラウザが「操作は中断されました」というダイアログ
を出してしまいます。

IE8、FF, Safari, Chromeでは全く問題のないコードなのです。

Microsoftのこれが原因なのかと。
Internet Explorer 8 または Internet Explorer 7、appendChild メソッドを使用して Web page を開くときの操作を中止する"のエラー メッセージ

ただお客様のところでは会社の方針として自由にブラウザを選べない、アップデートができない、
そういった事情のありアップデートで対処するという選択がとれない場合があります。

で、
そもそもこの問題はcreateElement()で作成したエレメントを同じところにappendChild()で追加すると問題が発生する、という摩訶不思議な「仕様?」によるもののようです。

回避方法はとしてとったのはhtml側であらかじめエレメントを用意する、という方法です。
開発はstrutsのフレームワークを採用しているのでjsp上のループで<div>をあらかじめ用意してしまいます。
idアトリビュートは適当にユニークなものを振っておきます。

<div id="app1"></div>
<div id="app2"></div>
.
.
.
<div id="appN"></div>

で、先ほどのコードを以下のように書き換えます。

function hoge(idname) {
this.div = document.getElementById(idname);
this.divに対してうにゅうにゅ
}


ご覧の通り既にjsp上にエレメントがあるのでappendChild()する必要がありません。

これで無事現状のIE7そしてその他のまともなモダンブラウザでも正常に動作するになります。

IE7ではテーブルにtr tdをappendChildする際の不具合もありますのでご注意を。

IE6ではpngのopaqueが聞かず悩み、IE8ではCSSの仕様の違いでレイアウトが崩れ、
そして今回IE7では摩訶不思議な不具合によって処理継続不能になりました。

もう、IEなんて世の中からなくなればいいのに。

今回は救ってくれませんでしたがこれまで
↓これに何度も救われています。必見です。





関連記事
スポンサーサイト

コンピュータ | コメント:0 | トラックバック:0 |
<<「今までなんだったんだ、と思うくらいおいしくトウモロコシをゆでる方法」をみて | HOME | 検索で見つけた!エスクトリーム結果表>>

この記事のコメント

コメントの投稿















コメント非公開の場合はチェック

この記事のトラックバック

| HOME |
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。