I would like to check if my website is in foreground with JavaScript. But don't answer before reading everything because you would directly say to me that I should do this:
$(window)
.focus(function() {
console.log("focus");
})
.blur(function() {
console.log("blur");
});
But the problem is that I've got an iframe from a third party on my page and if the user clicks on the iframe the window blur event gets fired but the user is acctualy still on my page. I tried to fix this by checking if document.activeElement is an iframe on blur:
$(window)
.focus(function() {
console.log("focus");
})
.blur(function() {
console.log("blur");
if (document.activeElement.tagName.toLowerCase() == "iframe") {
console.log("still focus");
}
});
The problem here is that I'm not able to check if the page is not in foreground anymore when a user clicks on the iframe first and then on another application.
So how can I check if the site is in foreground when it got an iframe in it?
