インターネットサイト○○を開けません。

javascript ie

割と有名なIEの不具合。（7でも健在）

body直下以外のbody内のノードで、appendChildを使うと、「インターネットサイト○○を開けません。操作は中断されました。」というダイアログが表示され、OKを押すとエラーページになる

原因は、ロードのタイミングとのこと。

問題

これに関連した問題で、ちょっと気づきにくいのが、こんなかんじの。
sample1.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="/prototype.js" type="text/javascript"></script>
<script src="/sample.js" type="text/javascript"></script>
<body>
<div>
<a href="sample2.html"><img src="sample1.jpg" onmouseover="popUpOn(event, 'サンプル１')" onmouseover="popUpOff()" /></a>
</div>
</body>
</html>

sample2.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="/prototype.js" type="text/javascript"></script>
<script src="/sample.js" type="text/javascript"></script>
<body>
<div>
<a href="sample1.html"><img src="sample2.jpg" onmouseover="popUpOn(event, 'サンプル２')" onmouseover="popUpOff()" /></a>
</div>
</body>
</html>

application.js

function popUpOn(event, PopMsg) {
  popUpOff();

  var x,y;
  var msgX=+10,msgY=-30;
  x=getMouseX(event);
  y=getMouseY(event);

  var div = document.createElement("div");
  div.setAttribute("id","pop_up");
  div.style.position = 'absolute';
  div.style.left = x+msgX+'px';
  div.style.top = y+msgY+'px';
  div.innerHTML = PopMsg;
  document.body.appendChild(div);
}

function popUpOff() {
  var div = $('pop_up');
  if(div != null){
    Element.remove("pop_up");
  }
}

// 省略

「body直下以外のbody内ノードの、onmouseover等で、要素を生成する関数等を呼び出した」場合も、タイミングによってはエラーとなります。
具体的には、この例で、sample1.htmlの画像をクリックしたとき、sample2.htmlが読み込まれますが、その時点でマウスカーソルがsample2.htmlの画像の上にあるため、onmouseoverイベントが実行されます。このとき、エラーが発生する”ことがあります”。

この例は極端ですが、たとえば、検索結果を表にして表示し、各項目にポップアップで説明文を表示、リンクでその値で絞込み検索を行う、といったWebアプリケーションでは割と起こり得ます。

回避

要は、ページがロードされるまで、要素を生成する操作をしないようにすればよいわけです。
Javascriptに変更を加えない方法では、以下のような感じで一応は回避できます。
sample1.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="/prototype.js" type="text/javascript"></script>
<script language="javascript">
var applicationScriptLoader = function() {
	var s = document.body.appendChild(document.createElement("script"));
	s.setAttribute('id', 'application_script_tag')
	s.type = "text/javascript";
	s.src = "/sample.js";
};
Event.observe(window, 'load', applicationScriptLoader, false);
</script>
<body>
<div>
<a href="sample2.html"><img src="sample1.jpg" onmouseover="popUpOn(event, 'サンプル１')" onmouseover="popUpOff()" /></a>
</div>
</body>
</html>

ページのロードが完了してから、要素を生成する関数が定義されているスクリプトを読み込みます。
完了するまでにonmouseoverイベントが発生した場合、エラーとなりますが、エラー画面になるよりましです。