How to detect a click event on a cross domain iframe

gistfile1.js

var myConfObj = {
  iframeMouseOver : false
}
window.addEventListener('blur',function(){
  if(myConfObj.iframeMouseOver){
    console.log('Wow! Iframe Click!');
  }
});

document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseover',function(){
   myConfObj.iframeMouseOver = true;
});
document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseout',function(){
    myConfObj.iframeMouseOver = false;
});

If page has multiple iframes then event will only fire the first time, unless you return focus to the page. Hmm..

This is so great. Thank you a lot.

so awsome !

did anyone done it with mobile Device???

did anyone done it with mobile Device???

also working in FireFox. thanks to @dawaltconley

window.addEventListener('blur', function () {
                window.setTimeout(function () {
                    if (document.activeElement == document.querySelector('your_iframe_selector')) {
                        //handle click
                    }
                }, 0);
});

As far as I can test this seems to work in Chrome and Firefox, but not in Safari. Anyone else got a workaround to get this working in Safari?

Also I would like to mention that if you add window.focus(); the user then don't have to click outside the iFrame themselves before it can register again a 'click' on the iFrame.

window.addEventListener('blur', function () {
    window.setTimeout(function () {
        if (document.activeElement == document.querySelector('your_iframe_selector')) {
            //handle click
            window.focus();
        }
    }, 0);
});

As far as I can test this seems to work in Chrome and Firefox, but not in Safari. Anyone else got a workaround to get this working in Safari?

Correction! It does work in (desktop) Safari. I needed to clear the browser history and after that my 'HTML/CSS/JS iframe click wizardry' did what it was supposed to do.