检测iframe何时获得或失去焦点

Question

检测iframe何时获得或失去焦点（即是否接收键盘事件）的正确方法是什么？以下内容在Fx4中不起作用：

var iframe = /* my iframe */;
iframe.addEventListener("focus", function() { /* never gets called */ }, false);

Answer 1

您可以轮询“document.activeElement”以确定它是否与iframe匹配。轮询并不理想，但它有效：

function checkFocus() {
  if(document.activeElement == document.getElementsByTagName("iframe")[0]) {
    console.log('iframe has focus');
  } else {
    console.log('iframe not focused');
  }
}

window.setInterval(checkFocus, 1000); 

Answer 2

我知道它已经老了，但我也遇到了同样的问题。

我最终使用了这小块代码：

$(document).on('focusout', function(){
       setTimeout(function(){
       // using the 'setTimout' to let the event pass the run loop
       if (document.activeElement instanceof HTMLIFrameElement) {
             // Do your logic here..
        }
    },0);
});

Answer 3

原来这不太可能。我必须更改页面的逻辑，以避免在iframe有焦点的情况下进行跟踪。

Answer 4

解决方案是在父页面上注入一个javascript事件，如下所示：

var script = document.createElement('script');
script.type = 'text/javascript';

script.innerHTML = 
"document.addEventListener('click', function()" + 
"{ if(document.getElementById('iframe')) {" +
    // What you want
"}});"; 

head.appendChild(script);

Answer 5

Here is the code to Detecting when an iframe gets or loses focus

 // This code can be used to verify Iframe gets focus/loses.

      function CheckFocus(){

       if (document.activeElement.id == $(':focus').context.activeElement.id) {
                // here do something
            }
     else{
      //do something
    }
}

Answer 6

这可能有效

document.addEventListener('click', function(event) {
  var frame= document.getElementById("yourFrameID");

  var isClickInsideFrame = frame.contains(event.target);

  if (!isClickInsideFrame ) {
    //exec code
  }

});

Answer 7

如何检查iframe被点击进出的时间以及悬停状态。

注意：我强烈建议您不要选择轮询方法，并采用事件驱动方法，例如此。

声明

无法直接在iframe上使用focus或blur事件，但您可以在window上使用它们来提供检查{{1}的事件驱动方法}}。因此，你可以完成你所追求的目标。

虽然我们现在在2018年，我的代码正在GTM中实现，并尝试跨浏览器兼容回IE 11.这意味着如果您正在使用更新的ES / ECMAScript功能，那么代码会更高效。

设置

我将更进一步说明我们还可以获取iframe的document.activeElement属性以及确定它是否正在悬停。

代码

理想情况下，您需要将此文件放入文档就绪事件中，或至少将其封装以使变量不是全局的[可能使用IIFE]。我没有将它包装在准备好的文档中，因为它是由GTM处理的。它也可能取决于您放置它的位置或者如何加载它，例如在页脚中。

https://jsfiddle.net/9285tbsm/9/

我注意到在JSFiddle预览中它已经是一个iframe，有时你必须先把它集中在事件开始捕获之前。其他问题可能是您的浏览器窗口尚未关注。

src

Answer 8

一个紧凑的函数，当iframe获得焦点或失去焦点时，它会接受要运行的回调。

/* eslint-disable no-unused-vars */
export default function watchIframeFocus(onFocus, onBlur) {
  let iframeClickedLast;

  function windowBlurred(e) {
    const el = document.activeElement;
    if (el.tagName.toLowerCase() == 'iframe') {
      iframeClickedLast = true;
      onFocus();
    } 
  }
  function windowFocussed(e) {
    if (iframeClickedLast) {
      iframeClickedLast = false;
      onBlur();
    } 
  }
  window.addEventListener('focus', windowFocussed, true);  
  window.addEventListener('blur', windowBlurred, true);
}

Answer 9

此解决方案在移动设备和台式机上都对我有效：

;(function pollForIframe() {
  var myIframe = document.querySelector('#my_iframe');
  if (!myIframe) return setTimeout(pollForIframe, 50);

  window.addEventListener('blur', function () {
    if (document.activeElement == myIframe) {
      console.log('myIframe clicked!');
    }
  });
})();