0

How to detect a click event on a cross domain iframe?

This method uses 'blur' effect on the parent website to determine if iframe was clicked. When mouse cursor is over iframe, the script sets a temporary variable myConfObj.iframeMouseOver to true. When we lost focus on the main page and that variable is set to true we know that user clicked iframe.

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

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

document.getElementById('frame').addEventListener('mouseout',function(){
    myConfObj.iframeMouseOver = false;
});
<iframe id="frame">
  
</iframe>
RUN
add comment
Suggest a different solution or add another example