How To Make Iframe With Svg "focusable"

I want to detect click on an iframe. The suggested way to do this is to catch blur event on parent window. But when user clicks on svg within an iframe, it doesn't take the focus a

Solution 1:

The only reliable solution I came up with is to create an "overframe" and remove it on first click.

$('.overframe').click(function () {
  alert('iframe click');
  this.remove();
});

iframe {
  border: 1px solid #666;
}
.wrapper {
  position: relative;
}
.overframe, iframe {  
  width: 400px; height: 300px;
}
.overframe {
  background: rgba(255,255,255,0.2);
  position: absolute;
  top: 0; left: 0;
  border: 1px solid #333;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass="wrapper"><iframesrc="http://phet.colorado.edu/sims/html/forces-and-motion-basics/latest/forces-and-motion-basics_en.html"></iframe><divclass="overframe"></div></div>