JavaScriptの動かないコード　(中級編)　"インターネットサイトを開けません。操作は中断されました。"

クイズ…下記のコードが意図した動作をしないのは，どうしてですか。（制限時間１分）

<body>

<p>
<script language="JavaScript">
	document.body.innerHTML = "test";
	alert(document.body.innerHTML); // "test"と表示
</script>
</p>

</body>

答え

IEで上記のコードに出会うと，"test"とアラート表示された直後に，

インターネットサイトを開けません。操作は中断されました。

のエラーダイアログが表示され，「Internet Explorer ではこのページは表示できません」のページに切り替わる。

IEでは，ページの読み込み途中に，documentオブジェクトに対してDOM操作をするのを控えた方がよい。

参照：Internet Explorer Programming Bugs
http://channel9.msdn.com/wiki/interne...

Apparently interacting with innerHTML and possibly using other JScript functionality causes IE to pop up "Internet Explorer cannot open the Internet site http://example.com. Operation aborted." messages after loading a page.
...
This is generally caused by DOM operations gone wrong,
I was having this problem trying to put some html inside a DIV tag using innerHTML and solved the problem by puting the DIV inside a TABLE.

上記のエラーを回避するためには，ページの読み込みが終わるのを待ち，onloadイベントでDOM操作するように変更すればよい。

<body>

<p>
<script language="JavaScript">
window.onload = f;
function f()
{
	document.body.innerHTML = "test";
	alert(document.body.innerHTML); // "test"と表示
}
</script>
</p>

</body>

ちなみに，Firefoxでは前者の記法でもエラーは発生しない。

また，IEであっても，冒頭のHTMLで＜p＞タグを外せばエラーは起きない。謎の多い仕様。

連載目次へ