Обнаружение, когда iframe получает или теряет фокус

Как правильно определить, когда iframe получает или теряет фокус (т. е. будет или не будет получать события клавиатуры)? В Fx4 не работает следующее:

var iframe = /* my iframe */;
iframe.addEventListener("focus", function() { /* never gets called */ }, false);
9
dom html javascript javascript-events

7 ответов

вы можете опросить " документ.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);
18

оказывается, это невозможно. Мне пришлось изменить логику моей страницы, чтобы избежать необходимости отслеживания, если iframe находится в фокусе.

7

Я знаю, что он старый, но у меня также была та же проблема.

Я закончил тем, что использовал этот маленький кусочек кода:

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

решение заключается в том, чтобы ввести событие 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

вот код для обнаружения, когда 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

Это может работать

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

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

  if (!isClickInsideFrame ) {
    //exec code
  }

});
0

Как проверить, когда iframe был нажат в или из, а также наведите состояние.

Примечание: я настоятельно рекомендую вам не выбирать метод опроса и идти с методом, управляемым событиями, таким как этот.

отказ от ответственности

невозможно использовать focus или blur событий непосредственно на iframe, но вы можете использовать их на window чтобы обеспечить управляемый событиями метод проверки document.activeElement. Таким образом, вы можете выполнить что тебе нужно.

хотя мы сейчас в 2018 году, мой код реализуется в GTM и пытается быть кросс-браузером, совместимым с IE 11. Это означает, что есть более эффективный код, если вы используете новые функции ES/ECMAScript.

настройка

Я собираюсь сделать это еще несколько шагов, чтобы показать, что мы также можем получить iframe

0