Question

When the user clicks on an external iframe, all event listeners on my BODY tag stop working and I need to prompt the user to click outside to regain the “focus” on the body tag.

But knowing when the user clicks on an iframe is actually very hard.

I know of two ways to know when there is a click on an iframe:

1- Overlapping a transparent div on the iframe (with the downside that the user has to click twice to actually click the iframe).

2- A very rough workaround which is having an input autofocused all the time and detect when it loses focus. But it’s just stupid to even consider implementing it.

Is there another way to know when the user “loses focus” of the main body by clicking on an external iframe?

Answer 1

The easiest method and the only one I’m aware of actually is to make an infinite loop that gets current focused element.id.

Then it’s simply a matter of comparing that id with your iframes to know which has been clicked.

Note that you will only be able to know for sure the user clicked once in the iframe, but there is no way to count clicks afterwards. Also notes that iframes can focus themselves with this method will be indistinguishable from a click.