how to make iframe with svg “focusable”

2019-07-02 05:04发布

问题:

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>

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

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