Best IT Recipes

How to make iframe with svg "focusable"

I want to detect a click on an iframe. suggested a way to do this to catch the blur event in the parent window. But when the user clicks on svg inside the iframe, he does not accept focus, and the root window does not lose it. Is there a way to get the iframe to focus when the user clicks on any content inside it? Or detect the click in any other way.

Here are two examples. The only difference is iframe src url:

Working example: http://plnkr.co/edit/Av6A2dzlfl2K9xYRl1C2

Non-working example: http://plnkr.co/edit/BVm0jL69XucbTNQ6ilKC

JS:

$(document).ready(function() { var overiFrame = false; $('iframe').hover(function() { overiFrame = true; $(window).focus(); }, function() { overiFrame = false; }); $(window).blur(function() { if (overiFrame) { alert("it works!"); } }); });

HTML:

  <body> <h1> Detect click on iframe </h1> <iframe src="http://phet.colorado.edu/sims/html/forces-and-motion-basics/latest/forces-and-motion-basics_en.html"></iframe> </body>
+3
javascript html iframe
Sep 15 '15 at 15:17
source share
1 answer

The only reliable solution I came across was to create an "overframe" and delete it on the 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; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="wrapper"> <iframe src="http://phet.colorado.edu/sims/html/forces-and-motion-basics/latest/forces-and-motion-basics_en.html"></iframe> <div class="overframe"></div> </div>
+1
Sep 15 '15 at 19:00
source share


More articles:


All Articles