how to make iframe with svg "focusable"

Question

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 and the root window does not lose one. Is there a way to force iframe to take focus when user clicks on any content within 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>

I think you can still detect clicks on svg elements. Is there a `stopPropagation` in there somewhere? If so, try catching the click event in the capturing phase (instead to the bubbling phase). — Halcyon, Sep 15 '15 at 15:19
I don't have access to the content of iframe. And I need general solution that will detect a click no meter what is inside of iframe. — Serhiy, Sep 15 '15 at 15:24
I don't think that matters. See if the click event occurs anyway (in the capture phase). — Halcyon, Sep 15 '15 at 15:25
Where should I wait for click event? On iframe element it never occurs. On svg element I can't even subscribe to the event because it is the content of the web page displayed in iframe. — Serhiy, Sep 15 '15 at 17:07
the suggested answer is only valid if you're leaving a page on clicking the iframe. In that case the onunload function is called, and with the overIframe set we can assume we were over an iFrame which caused the onunload. In this case the iframe does not cause an onunload or blur, so it's impossible to detect it reliably — patrick, Sep 15 '15 at 21:58

score 1 · Accepted Answer · answered Sep 15 '15 at 19:00

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;
}

<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>

how to make iframe with svg "focusable"

1 Answers1

Linked