Question

我想检测点击iframe。执行此操作的suggested方法是捕获父窗口上的模糊事件。但是当用户点击iframe中的svg时，它不会获得焦点，而根窗口也不会丢失。当用户点击其中的任何内容时，有没有办法强制iframe成为焦点？或者以任何其他方式检测点击。

以下是两个例子。唯一的区别是iframe src url：

工作示例：http://plnkr.co/edit/Av6A2dzlfl2K9xYRl1C2

非工作示例：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>

Answer 1

我提出的唯一可靠的解决方案是创建一个＆＃34; overframe＆＃34;并在第一次点击时删除它。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用svg制作iframe＆＃34;可聚焦＆＃34;

1 个答案: