web-dev-qa-db-ja.com

iframeがフォーカスを取得または喪失したときの検出

Iframeがフォーカスを取得または喪失したとき（つまり、キーボードイベントを受信するかどうか）を検出する正しい方法は何ですか？以下はFx4では機能しません。

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

それは実際には不可能であることが判明しました。 iframeにフォーカスがある場合に追跡する必要がないように、ページのロジックを変更する必要がありました。

7
CAFxX

「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);
22
Ryan

私はそれが古いことを知っていますが、私も同じ問題を抱えていました。

私はこの小さなコードを使用することになりました：

$(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);
});
9
EliorCohen

このソリューションは、モバイルとデスクトップの両方で機能しています。

;(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!');
    }
  });
})();
0
Brian Norman

これはうまくいくかもしれません

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

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

  if (!isClickInsideFrame ) {
    //exec code
  }

});
0
Justine Lance T. Mojal

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);
}
0
Adam Jagosz

iframeがフォーカスを取得または喪失したときに検出するコードは次のとおりです

 // 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
    }
}
0
Sheo Dayal Singh

解決策は、次のように親ページに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);
0
Sindar