如何使用 svg“可聚焦”制作 iframe答案

【问题标题】：how to make iframe with svg "focusable"如何使用 svg“可聚焦”制作 iframe
【发布时间】：2015-09-15 15:17:35
【问题描述】：

我想检测对 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>

【问题讨论】：

我认为您仍然可以检测到对 svg 元素的点击。那里有stopPropagation吗？如果是这样，请尝试在捕获阶段（而不是冒泡阶段）捕获点击事件。
我无权访问 iframe 的内容。而且我需要通用解决方案来检测 iframe 内部的点击无仪表。
我认为这并不重要。查看点击事件是否仍然发生（在捕获阶段）。
我应该在哪里等待点击事件？在 iframe 元素上它永远不会发生。在 svg 元素上，我什至无法订阅该事件，因为它是 iframe 中显示的网页内容。
建议的答案仅在您在点击 iframe 时离开页面时才有效。在这种情况下，会调用 onunload 函数，并且通过设置 overIframe，我们可以假设我们超过了导致 onunload 的 iFrame。在这种情况下，iframe 不会导致 onunload 或模糊，因此无法可靠地检测到它

标签： javascript html iframe

【解决方案1】：

我想出的唯一可靠的解决方案是创建一个“overframe”并在第一次点击时将其删除。

$('.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>

【讨论】：