JSFiddle - React, Tailwind, and code Playground

HTML

<iframe id="iframe1" src="//example.com"></iframe>
<iframe id="iframe2" src="//example.com"></iframe>
<iframe id="iframe3" src="//example.com"></iframe>
<iframe id="iframe4" src="//example.com"></iframe>
<div id="message"></div>

CSS

iframe {
    width: 500px;
    height: 300px;
}

JavaScript

var monitor = setInterval(intervals, 100);

function intervals() {
    var elem = document.activeElement;
    if(elem && elem.tagName == 'IFRAME'){
			console.log('clicked');
      clearInterval(monitor);
      monitor = setInterval(exitIframe.bind(null, elem), 100);
		}
}

function exitIframe(iframe){
	var elem = document.activeElement;
  if((elem && elem.tagName != 'IFRAME') || (elem && elem != iframe)){
			console.log('exited');
      clearInterval(monitor);
      monitor = setInterval(intervals, 100);
		}
}