Demo of Window focus , blur and hasFocus() methods




Wait for Status here
<script language=javascript>

function to_close(){
tm.close();
}

function to_open(){
tm=window.open("moveby-child.htm","Ratting","width=250,height=150,left=650,0,top=350,status=0,");
}


function to_focus(){
tm.focus();   // Keeping the focus on small window
}

function to_blur(){
tm.blur();   // Keeping the focus out on small window
}
//////////////////
function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_msg()',refresh)
}

function display_msg() {
if ( document.hasFocus() ) {
document.getElementById('my_msg').style.backgroundColor = '#00f000';	
document.getElementById('my_msg').innerHTML = 'This document is in Focus ';
}else{
document.getElementById('my_msg').style.backgroundColor = '#f07814';
document.getElementById('my_msg').innerHTML = 'This document is NOT in Focus';	
}
display_c();
 }
//////////////
</script>
HTML
<input type="button" name="btn" value="Open child window" onclick="to_open()";>
<input type="button" name="btn" value="Close Child window" onclick="to_close()";>
<input type="button" name="btn" value="Focus child window" onclick="to_focus()";>
<input type="button" name="btn" value="Blur Child window " onclick="to_blur()";>
<br><br>
<span id=my_msg>Wait for Status here</span>
Full Code of moveby-child.htm
<html>
<head>
<title>Demo of moveby child window</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script language="javascript">
function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_msg()',refresh)
}
////////////////////////////
function display_msg() {
if ( document.hasFocus() ) {
document.getElementById('my_msg').style.backgroundColor = "#00f000";
document.getElementById('my_msg').innerHTML = "This document is in Focus ";
}
else
{
document.getElementById('my_msg').style.backgroundColor = "#f07814";
document.getElementById('my_msg').innerHTML = "This document is NOT in Focus ";
}
display_c();
}
window.onload=display_c;
//////////////
</script>
</head >
<body >
<br>

This is child window<br><br>

<span id=my_msg>Wait for Status here</span>
</body>
</html>