Erkennen, wenn ein iframe Fokus erhält oder verliert

ich weiß, es ist alt, aber ich hatte auch das gleiche problem.

landete ich mit diesem kleinen Schnipsel von code:

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

Wie um zu überprüfen, wenn ein iframe geklickt wurde, oder auch als hover-Zustand.

Hinweis: ich würde empfehlen, Sie nicht wählen, eine polling-Methode und gehen mit einem event-driven-Methode wie diese.

Haftungsausschluss

Es ist nicht möglich, mit dem focus oder blur Veranstaltungen direkt auf einen iframe, aber Sie können Sie auf der window bieten eine ereignisgesteuerte Methode der überprüfung der document.activeElement. So können Sie erreichen, was Sie wollen.

Obwohl wir nun im Jahr 2018, mein code umgesetzt wird im GTM und versucht, eine cross-browser-kompatibel zurück zum IE 11. Dies bedeutet, dass es effizienter code, wenn Sie nutzen ES neuere/ECMAScript-Funktionen.

Setup

Werde ich an dieser ein paar Schritte weiter, um zu zeigen, dass wir auch die iframe - src - Attribut als auch festzustellen, ob es schwebte.

- Code

Würden Sie im Idealfall benötigen, um diese in ein Dokument ready-Ereignis, oder zumindest verkapseln, so dass die Variablen nicht global [vielleicht mit einer IIFE]. Ich habe nicht wickeln Sie es in ein Dokument bereit, denn es behandelt die von GTM. Es kann auch davon abhängen, wo Sie diese oder wie man es zu laden, wie in der Fußzeile.

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

Habe ich bemerkt, im JSFiddle Album, dass es bereits ein iframe, manchmal müssen Sie uns zuerst, bevor die Veranstaltungen beginnen zu erfassen. Andere Probleme sein können, dass Ihr browser-Fenster noch nicht fokussiert entweder.

//Helpers

var iframeClickedLast;

function eventFromIframe(event) {
  var el = event.target;
  return el && el.tagName && el.tagName.toLowerCase() == 'iframe';
}

function getIframeSrc(event) {
  var el = event.target;
  return eventFromIframe(event) ? el.getAttribute('src') : '';
}

//Events

function windowBlurred(e) {
  var el = document.activeElement;
  if (el.tagName.toLowerCase() == 'iframe') {
    console.log('Blurred: iframe CLICKED ON', 'SRC:', el.getAttribute('src'), e);
    iframeClickedLast = true;
  } 
  else {
    console.log('Blurred', e);
  }
}

function windowFocussed(e) {
  if (iframeClickedLast) {
    var el = document.activeElement;
    iframeClickedLast = false;
    console.log('Focussed: iframe CLICKED OFF', 'SRC:', el.getAttribute('src'), e);
  } 
  else {
    console.log('Focussed', e);
  }
}

function iframeMouseOver(e) {
  console.log('Mouse Over', 'SRC:', getIframeSrc(e), e);
}

function iframeMouseOut(e) {
  console.log('Mouse Out', 'SRC:', getIframeSrc(e), e);
}

//Attach Events

window.addEventListener('focus', windowFocussed, true);  
window.addEventListener('blur', windowBlurred, true);

var iframes = document.getElementsByTagName("iframe");
for (var i = 0; i < iframes.length; i++) {
  iframes[i].addEventListener('mouseover', iframeMouseOver, true);
  iframes[i].addEventListener('mouseout', iframeMouseOut, true);
}

Hier ist der code, der erkennt, wenn ein iframe Fokus erhält oder verliert

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