Windows IE バグ: “Operation aborted”

仕事で Internet Explorer の画面チェックを行っていた時に見つけたバグです。IE だけは、途中までページ読込んで、以下の様なエラーが出て、ファイルが読み込めない（いわゆる 404 のエラー画面）に切り替わっていました。

最初は理由がさっぱりわからず途方に暮れていたのですが、ググってわかりました。なんと Microsoft の developer コミュニティニュースサイトの Channel9 に Wiki があって、IE のバグとかいっぱい書いてあるのですね。素晴らしい。

Internet Explorer Programming Bugs

上記ページで "Operation aborted" とページ内検索をすると出て来ると思います。

仕組み

以下の様な javascript を table 内から起動すると上記エラーが発生します。（Channel9 WIki より抜粋。タブは修正しました。）

<table>
   <tr>
      <td>
         <script type="text/Javascript">
            var d = document.createElement('div');
            document.body.appendChild(d);
         </script>
      </td>
   </tr>
</table>

要するに、ページ読込が完了していない状況でページに対してなんらかの変更をするようなスクリプトを table 内から行おうとすると、エラーが発生するようです。このコードでは body に appendChild してますけど、innerHTML でも同じようです。

回避法

table の外に script を追い出すのが一番簡単でしょう。もしそれが出来なければ、window が読み終わっていればいいのですから、読み込み終了を待ってから実行すればいいのです。つまり window.onload にコードを実行する様な関数オブジェクトを突っ込む、と。上記コードを以下のようにすれば実行可能です。

<table>
   <tr>
      <td>
         <script type="text/Javascript">
            var d = document.createElement('div');
            window.onload = function() {
               document.body.appendChild(d);
            }
         </script>
      </td>
   </tr>
</table>

問題点と発見の理由

検証していませんが、もし最後のコードのように、 window.onload に関数を付ける回避法だと、それ以前あるいはそれ以後に 同じ window.onload に違う関数を割り当ててしまった場合不具合が起こるのではないでしょうか？

しかし僕も是を発見したのは、こんがらがりまくったコードの整理をして、CSS & valid HTML にしていたからで、まぁ不通の状況なら table の中の javascript から appendChild する必要は無いでしょうねぇ。。と言うわけで頻度の低そうなバッドノウハウでした。