<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checking whether Page is Opened Active Visible</title>
</head>
<body>
<input onclick="clearInterval(Btimer);" type="button" value="Stop">
<table id="status"><tr><td id="Frame">Frame</td><td id="Visible">Visible</td><td id="Focus">Focus</td></tr></table>
<p id="disp"></p>
<iframe src="top_window.html" style="top:0px; left:400px; position:absolute; width:300px; height:100%"></iframe>
<script>
function $(el) { return document.getElementById(el); }
let text;
function checkTopWindow()
{
$("Frame").style.color = (window.top == window.self ? "lime" : "red" ); // true if top window else used in a iFrame or fram
$("Visible").style.color = (document.hidden ? "red" : "lime" ); // if page is shown or not (a page is covering it or it is minimized)
$("Focus").style.color = ( document.hasFocus() ? "lime" : "red" ); // if has focus (an iFrame has focus if the page has)
$("disp").innerHTML += (window.top == window.self)+" - "+!document.hidden+" - "+document.hasFocus()+"<br>";
}
Btimer = setInterval( checkTopWindow, 1000 );
</script>
</body>
</html>