Forum Moderators: open
var stopIt;
window.onblur = function(evt){stopIt = setTimeout('self.close()',0);}
document.onfocus = function(etv){clearTimeout(stopIt);} // Mozilla only
for(var i=0; i<document.all.length; i++){ // IE
document.all[i].onfocus = function(etv){clearTimeout(stopIt);}
}
index.html
-----------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Main page</title>
</head>
<body>
We want the popup window opened to close itself if it loses focus but only when window is hidden or minimized :<br>
<a href="popupA.html" target="popupA" onClick="window.open('popupA.html', 'popupA'); return false;">popupA (without onfocus event handler, either IE or Mozilla)</a><br>
<a href="popupB.html" target="popupB" onClick="window.open('popupB.html', 'popupB'); return false;">popupB (with onfocus event handler, only for IE)</a><br>
<a href="popupC.html" target="popupC" onClick="window.open('popupC.html', 'popupC'); return false;">popupC (with onfocus event handler, only Mozilla)</a><br>
<a href="popupD.html" target="popupD" onClick="window.open('popupD.html', 'popupD'); return false;">popupD (with onfocus event handler, IE and Mozilla)</a><br>
</body>
</html>
-----------------
popupA.html
-----------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>popupA</title>
</head>
<body>
popupA (without onfocus event handler, either IE or Mozilla)<br>
Clicking anything in popupA will make window self close<br>
<a href="#">link</a>
<script language="JavaScript">
<!--
window.onblur = function(evt){self.close();}
//-->
</script>
</body>
</html>
-----------------
popupB.html
-----------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>popupB</title>
</head>
<body>
popupB (with onfocus event handler, only for IE)<br>
Click the link or in the page, window won't lose focus in IE<br>
<a href="#">link</a>
<script language="JavaScript">
<!--
var stopIt;
window.onblur = function(evt){stopIt = setTimeout('self.close()',0);}
for(var i=0; i<document.all.length; i++){ // IE
document.all[i].onfocus = function(etv){clearTimeout(stopIt);}
}
//-->
</script>
</body>
</html>
-----------------
popupC.html
-----------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>popupC </title>
</head>
<body>
popupC (with onfocus event handler, only for Mozilla)<br>
Click the link or in the page, window won't lose focus in Mozilla<br>
<a href="#">link</a>
<script language="JavaScript">
<!--
var stopIt;
window.onblur = function(evt){stopIt = setTimeout('self.close()',0);}
document.onfocus = function(etv){clearTimeout(stopIt);} // Mozilla
//-->
</script>
</body>
</html>
-----------------
popupD.html
-----------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>popupD </title>
</head>
<body>
popupD (with onfocus event handler, IE and Mozilla)<br>
Click the link or in the page, window won't lose focus either in Mozilla or IE<br>
<a href="#">link</a>
<script language="JavaScript">
<!--
var stopIt;
window.onblur = function(evt){stopIt = setTimeout('self.close()',0);}
document.onfocus = function(etv){clearTimeout(stopIt);} // Mozilla
for(var i=0; i<document.all.length; i++){ // IE
document.all[i].onfocus = function(etv){clearTimeout(stopIt);}
}
//-->
</script>
</body>
</html>
----------------
1. I don't think you need to add onfocus listeners to ALL elements on the page. The only elements that can receive focus are form elements {input, button, select etc}.
2. For a touch of efficiency, whether adding to all elements, or just form elements, it's better {speed & memory} to define a function separately, then make the assignents with a reference to that, rather than using n anonymous functions. Small matter in most cases though.
