Erkennen Klicken Sie mit JavaScript in Iframe

128

Ich verstehe, dass es nicht möglich ist zu sagen, was der Benutzer in einem iframedomänenübergreifenden Bereich tut . Was ich tun möchte, ist zu verfolgen, ob der Benutzer überhaupt in die geklickt hat iframe. Ich stelle mir ein Szenario vor, in dem sich ein Unsichtbares divüber dem befindet iframeund der divWille das Klickereignis gerade an das weitergibt iframe.

Ist so etwas möglich? Wenn ja, wie würde ich dann vorgehen? Das iframessind Anzeigen, so habe ich keine Kontrolle über die Tags , die verwendet werden.

javascript iframe ads dom-events click-tracking Russ Bradberry
quelle

4

Es ist möglich und es gibt eine Crossbrowser-Lösung: stackoverflow.com/a/32138108/1064513

Dmitry Kochin

39

Ist so etwas möglich?

Nein. Alles, was Sie tun können, ist zu erkennen, dass die Maus in den Iframe geht und möglicherweise (wenn auch nicht zuverlässig), wenn sie wieder herauskommt (dh Sie versuchen, den Unterschied zwischen dem Zeiger, der auf dem Weg woanders über die Anzeige fährt, und dem Verweilen herauszufinden auf der Anzeige).

Ich stelle mir ein Szenario vor, in dem sich über dem Iframe ein unsichtbares Div befindet und das Div dann das Klickereignis an den Iframe weiterleitet.

Nein, es gibt keine Möglichkeit, ein Klickereignis zu fälschen.

Indem Sie die Maus abfangen, verhindern Sie, dass der ursprüngliche Klick zum Iframe gelangt. Wenn Sie feststellen könnten, wann die Maustaste gedrückt werden soll, könnten Sie versuchen, das unsichtbare Div aus dem Weg zu räumen, damit der Klick durchgeht ... aber es gibt auch kein Ereignis, das kurz vor einem Mousedown ausgelöst wird.

Sie könnten versuchen zu erraten, indem Sie beispielsweise nachsehen, ob der Zeiger zur Ruhe gekommen ist, und erraten, dass möglicherweise ein Klick bevorsteht. Aber es ist völlig unzuverlässig, und wenn Sie versagen, haben Sie gerade einen Klick verloren.

Bobince
quelle

4

Ja, so ist es. Und es gibt Crossbrowser-Lösung: stackoverflow.com/a/32138108/1064513

Dmitry Kochin

1

Ich habe diese Links überprüft und denke, die Antwort ist richtig. Sie können nur einen Klick innerhalb des Iframes erkennen, nicht jedoch, was angeklickt wurde.

user568021

Ich stimme ab, nur weil es nicht ganz stimmt. Das meiste, was Sie sagen, ist wahr, aber es gibt Problemumgehungen, ebenso wie die populärere Antwort in diesem Thread.

Newms87

154

Dies ist sicherlich möglich. Dies funktioniert in Chrome, Firefox und IE 11 (und wahrscheinlich auch in anderen).

focus();
var listener = window.addEventListener('blur', function() {
    if (document.activeElement === document.getElementById('iframe')) {
        // clicked
    }
    window.removeEventListener('blur', listener);
});

JSFiddle

Vorsichtsmaßnahme: Dies erkennt nur den ersten Klick. Soweit ich weiß, ist das alles, was Sie wollen.

Paul Draper
quelle

1

@the_joric, weil es 4 Jahre nach der Frage war und die Leute normalerweise nicht über die ersten paar Antworten hinaus scrollen.

Paul Draper

3

Beachten Sie auch, dass beim Ändern der Browser-Registerkarten der Fokus () ausgelöst wird.

Linnay

7

In Firefox funktioniert es NICHT. JSFiddle enthält Fehler, die dies verbergen: = statt ===. Es gibt Crossbrowser-Lösung (auch in IE8): stackoverflow.com/a/32138108/1064513

Dmitry Kochin

8

Das Unschärfeereignis wird nicht ausgelöst, wenn der Benutzer nicht zuerst in das Hauptdokument klickt! Dies ist auch nicht zum Erkennen von Klicks auf mehrere Iframes geeignet, da kein Ereignis ausgelöst wird, wenn der Fokus von einem Iframe auf einen anderen wechselt (das blurEreignis des Iframes wird nicht ausgelöst ).

Tomáš Kafka

1

warum es eine Abhängigkeit vom Fokus gibt ();

Prasad Shinde

107

Basierend auf der Antwort von Mohammed Radwan habe ich die folgende jQuery-Lösung gefunden. Grundsätzlich wird verfolgt, was iFrame-Leute schweben. Wenn dann das Fenster unscharf wird, bedeutet dies höchstwahrscheinlich, dass der Benutzer auf das Iframe-Banner geklickt hat.

Der Iframe sollte in ein Div mit einer ID eingefügt werden, um sicherzustellen, dass Sie wissen, auf welchen Iframe der Benutzer geklickt hat:

<div class='banner' bannerid='yyy'>
    <iframe src='http://somedomain.com/whatever.html'></iframe>
<div>

so:

$(document).ready( function() {
    var overiFrame = -1;
    $('iframe').hover( function() {
        overiFrame = $(this).closest('.banner').attr('bannerid');
    }, function() {
        overiFrame = -1
    });

... dies hält overiFrame auf -1, wenn keine iFrames schweben, oder die 'Bannerid', die im Wrapping-Div gesetzt ist, wenn ein Iframe schwebt. Alles was Sie tun müssen, ist zu überprüfen, ob 'overiFrame' gesetzt ist, wenn das Fenster unscharf wird, wie folgt: ...

    $(window).blur( function() {
        if( overiFrame != -1 )
            $.post('log.php', {id:overiFrame}); /* example, do your stats here */
    });
});

Sehr elegante Lösung mit einem kleinen Nachteil: Wenn ein Benutzer beim Bewegen der Maus über einen iFrame ALT-F4 drückt, wird dies als Klick protokolliert. Dies geschah jedoch nur in FireFox, IE, Chrome und Safari haben es jedoch nicht registriert.

Nochmals vielen Dank Mohammed, sehr nützliche Lösung!

Patrick
quelle

Ich habe diese Antwort mit + 1 bearbeitet, obwohl sie die folgenden Probleme aufweist: 1. Wenn mehrere Iframes vorhanden sind, klicken Sie auf einen von ihnen und sofort auf einen anderen - der zweite Klick wird nicht erkannt. 2. Mehrere Klicks innerhalb eines Iframes werden ebenfalls nicht gezählt. 3. Funktioniert auf Mobilgeräten nicht richtig, da Sie das "Hover" -Ereignis nicht mit einem Finger ausführen können.

Sych

Das obige Skript wird von mir verwendet, um Klicks von meiner Website zu erkennen. Die meisten Werbenetzwerke liefern jetzt Banner in Rahmen. Wenn Sie auf einen und dann schnell auf einen anderen klicken, bevor Sie beim ersten Klick abgereist sind, möchte ich technisch den letzten Klick wissen, den Sie tatsächlich verlassen haben. In meinem Fall ist es also erwünschtes Verhalten. Es erkennt auch Klicks auf mobilen Bannern. Der Hover muss also direkt vor dem Ausführen des Klicks gestartet werden

Patrick

Funktioniert nicht bei SVG-Elementen im Iframe-

Serhiy

@Serhiy, das ist, weil Sie die ursprüngliche Seite nicht wirklich verlassen, wenn Sie auf den

Patrick

6

Diese Antwort ist die beste von ihnen. Wenn Sie jedoch jeden Klick in den Iframe erhalten möchten, müssen Sie den Fokus darauf legen, sobald der Benutzer darauf geklickt hat , um weitere Klicks zu überwachen. Dies sollte dem Abschnitt $ (window) .blur () hinzugefügt werden : setTimeout(function(){ window.focus(); }, 0);. Jetzt klickt der Benutzer, setzt den Fokus in den Iframe, das Skript zieht diesen Fokus zurück und kann nun weitere Fokusänderungen von zukünftigen Klicks überwachen.

HelpingHand

89

Dies ist eine kleine Lösung, die in allen Browsern funktioniert, auch in IE8:

var monitor = setInterval(function(){
    var elem = document.activeElement;
    if(elem && elem.tagName == 'IFRAME'){
        clearInterval(monitor);
        alert('clicked!');
    }
}, 100);

Sie können es hier testen: http://jsfiddle.net/oqjgzsm0/

Dmitry Kochin
quelle

1

Was ist, wenn Sie mehrere Iframes haben und deren ID nicht kennen?

Shankshera

1

einzige browserübergreifende zuverlässige Lösung, die auch im neuesten FF funktioniert! Vielen Dank. Es verdient mehr Upvotes

BrainOverflow

6

@shankshera Hol dir einfach elem.id, das ist deine Iframe-ID :). Siehe jsfiddle.net/oqjgzsm0/219

Tomáš Kafka

1

Ich verwende dies, um Klicks auf soziale Schaltflächen zu verfolgen. Da jedoch 3/4 der von mir verwendeten Iframes verwendet werden, muss ich Klicks in mehreren Iframes verfolgen. Ich habe die Geige aktualisiert, um dies zu ermöglichen: jsfiddle.net/oqjgzsm0/273 . Es wird ein neues Intervall festgelegt, in dem überprüft wird, ob ein Klick außerhalb des zuletzt angeklickten Iframes liegt. Setzt dann das ursprüngliche Intervall zurück, um erneut nach Klicks zu suchen. Es werden nicht mehrere Klicks im selben Iframe ohne einen Klick außerhalb verfolgt.

Brouxhaha

14

Abgesehen von der Tatsache, dass die Verwendung eines Endlosschleifenintervalls mit einer solchen Rate keine sehr gute Idee ist, werden dadurch Fehlalarme

erkannt,

36

Der folgende Code zeigt Ihnen, ob der Benutzer auf den Iframe klickt / schwebt oder ihn verlässt: -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Detect IFrame Clicks</title>
<script type="text/javascript">
    $(document).ready(function() {
        var isOverIFrame = false;

        function processMouseOut() {
            log("IFrame mouse >> OUT << detected.");
            isOverIFrame = false;
            top.focus();
        }

        function processMouseOver() {
            log("IFrame mouse >> OVER << detected.");
            isOverIFrame = true;
        }

        function processIFrameClick() {
            if(isOverIFrame) {
                // replace with your function
                log("IFrame >> CLICK << detected. ");
            }
        }

        function log(message) {
            var console = document.getElementById("console");
            var text = console.value;
            text = text + message + "\n";
            console.value = text;
        }

        function attachOnloadEvent(func, obj) {
            if(typeof window.addEventListener != 'undefined') {
                window.addEventListener('load', func, false);
            } else if (typeof document.addEventListener != 'undefined') {
                document.addEventListener('load', func, false);
            } else if (typeof window.attachEvent != 'undefined') {
                window.attachEvent('onload', func);
            } else {
                if (typeof window.onload == 'function') {
                    var oldonload = onload;
                    window.onload = function() {
                        oldonload();
                        func();
                    };
                } else {
                    window.onload = func;
                }
            }
        }

        function init() {
            var element = document.getElementsByTagName("iframe");
            for (var i=0; i<element.length; i++) {
                element[i].onmouseover = processMouseOver;
                element[i].onmouseout = processMouseOut;
            }
            if (typeof window.attachEvent != 'undefined') {
                top.attachEvent('onblur', processIFrameClick);
            }
            else if (typeof window.addEventListener != 'undefined') {
                top.addEventListener('blur', processIFrameClick, false);
            }
        }

        attachOnloadEvent(init);
    });
</script>
</head>
<body>
<iframe src="www.google.com" width="100%" height="1300px"></iframe>
<br></br>
<br></br>
<form name="form" id="form" action=""><textarea name="console"
id="console" style="width: 100%; height: 300px;" cols="" rows=""></textarea>
<button name="clear" id="clear" type="reset">Clear</button>
</form>
</body>
</html>

Sie müssen den src im iframe durch Ihren eigenen Link ersetzen. Hoffe das wird helfen. Grüße, Mo.

Mohammed Radwan
quelle

1

Basierend auf schnellen Tests scheint das angegebene Beispiel (nach dem Korrigieren der URL) in IE 8 zu funktionieren, etwas zuverlässig in Chrome 14.0.835.186 m, aber überhaupt nicht in Firefox 6.0.2.

Matthew Flaschen

Funktioniert gut für Chrome, funktioniert aber nicht für Firefox v62, da beim Klicken auf iframe Unschärfe kein Ereignis ausgelöst wird

slesh

11

Ich habe gerade diese Lösung gefunden ... Ich habe es versucht, ich habe es geliebt ...

Funktioniert für domänenübergreifende Iframes für Desktop und Mobile!

Ich weiß nicht, ob es noch kinderleicht ist

window.addEventListener('blur',function(){
      if(document.activeElement.id == 'CrossDomainiframeId'){
        //do something :-)
      }
});

Viel Spaß beim Codieren

Tony
quelle

2

Dieselbe

Ryan

5

Sie können dies erreichen, indem Sie das Unschärfeereignis für das Fensterelement verwenden.

Hier ist ein jQuery-Plugin zum Verfolgen des Klickens auf Iframes (es wird eine benutzerdefinierte Rückruffunktion ausgelöst, wenn auf einen Iframe geklickt wird): https://github.com/finalclap/iframeTracker-jquery

Verwenden Sie es so:

jQuery(document).ready(function($){
    $('.iframe_wrap iframe').iframeTracker({
        blurCallback: function(){
            // Do something when iframe is clicked (like firing an XHR request)
        }
    });
});

Vince
quelle

5

Unter http://jsfiddle.net/Lcy797h2/ finden Sie meine langwierige Lösung, die im IE nicht zuverlässig funktioniert

        $(window).on('blur',function(e) {    
            if($(this).data('mouseIn') != 'yes')return;
            $('iframe').filter(function(){
                return $(this).data('mouseIn') == 'yes';
            }).trigger('iframeclick');    
        });

        $(window).mouseenter(function(){
            $(this).data('mouseIn', 'yes');
        }).mouseleave(function(){
            $(this).data('mouseIn', 'no');
        });

        $('iframe').mouseenter(function(){
            $(this).data('mouseIn', 'yes');
            $(window).data('mouseIn', 'yes');
        }).mouseleave(function(){
            $(this).data('mouseIn', null);
        });

        $('iframe').on('iframeclick', function(){
            console.log('Clicked inside iframe');
            $('#result').text('Clicked inside iframe'); 
        });
        $(window).on('click', function(){
            console.log('Clicked inside window');
            $('#result').text('Clicked inside window'); 
        }).blur(function(){
            console.log('window blur');
        });

        $('<input type="text" style="position:absolute;opacity:0;height:0px;width:0px;"/>').appendTo(document.body).blur(function(){
                $(window).trigger('blur');
            }).focus();

DiverseAndRemote.com
quelle

Es ist ein großartiger Codierer ... was ich eigentlich will ... + 1 an @Omar Jackman ... so hilfreich, um einen Klick auf die YouTube-Werbung zu erfassen

saun4frsh

4

Dies funktioniert für mich in allen Browsern (einschließlich Firefox)

https://gist.github.com/jaydson/1780598

https://jsfiddle.net/sidanmor/v6m9exsw/

var myConfObj = {
  iframeMouseOver : false
}
window.addEventListener('blur',function(){
  if(myConfObj.iframeMouseOver){
    console.log('Wow! Iframe Click!');
  }
});

document.getElementById('idanmorblog').addEventListener('mouseover',function(){
   myConfObj.iframeMouseOver = true;
});
document.getElementById('idanmorblog').addEventListener('mouseout',function(){
    myConfObj.iframeMouseOver = false;
});

<iframe id="idanmorblog" src="https://sidanmor.com/" style="width:400px;height:600px" ></iframe>

Erweitern Sie das Snippet

<iframe id="idanmorblog" src="https://sidanmor.com/" style="width:400px;height:600px" ></iframe>

Sidanmor
quelle

3

Mohammed Radwan, Ihre Lösung ist elegant. Um Iframe-Klicks in Firefox und IE zu erkennen, können Sie jedoch eine einfache Methode mit document.activeElement und einem Timer verwenden. Ich habe in allen Interwebs nach einer Methode gesucht, um Klicks auf einen Iframe in Chrome und Safari zu erkennen. Am Rande des Aufgebens finde ich Ihre Antwort. Danke mein Herr!

Einige Tipps: Ich habe festgestellt, dass Ihre Lösung zuverlässiger ist, wenn Sie die Funktion init () direkt aufrufen, als über attachOnloadEvent (). Dazu müssen Sie natürlich init () erst nach dem iframe-HTML-Code aufrufen. Es würde also ungefähr so aussehen:

<script>
var isOverIFrame = false;
function processMouseOut() {
    isOverIFrame = false;
    top.focus();
}
function processMouseOver() { isOverIFrame = true; }
function processIFrameClick() {
    if(isOverIFrame) {
    //was clicked
    }
}

function init() {
    var element = document.getElementsByTagName("iframe");
    for (var i=0; i<element.length; i++) {
        element[i].onmouseover = processMouseOver;
        element[i].onmouseout = processMouseOut;
    }
    if (typeof window.attachEvent != 'undefined') {
        top.attachEvent('onblur', processIFrameClick);
    }
    else if (typeof window.addEventListener != 'undefined') {
        top.addEventListener('blur', processIFrameClick, false);
    }
}
</script>

<iframe src="http://google.com"></iframe>

<script>init();</script>

zone117x
quelle

3

Sie können dies tun, um Ereignisse in das übergeordnete Dokument zu übertragen:

$('iframe').load(function() {
    var eventlist = 'click dblclick \
                    blur focus focusin focusout \
                    keydown keypress keyup \
                    mousedown mouseenter mouseleave mousemove mouseover mouseout mouseup mousemove \
                    touchstart touchend touchcancel touchleave touchmove';

    var iframe = $('iframe').contents().find('html');

    // Bubble events to parent
    iframe.on(eventlist, function(event) {
        $('html').trigger(event);
    });
});

Erweitern Sie einfach die Ereignisliste für weitere Ereignisse.

Taner Topal
quelle

Ich habe 'Touchend' Event benutzt und es hat funktioniert! Ihre Antwort hat mir sehr geholfen!

3

Ich geriet in eine Situation, in der ich Klicks auf einen Social-Media-Button verfolgen musste, der durch einen Iframe gezogen wurde. Ein neues Fenster wird geöffnet, wenn auf die Schaltfläche geklickt wird. Hier war meine Lösung:

var iframeClick = function () {
    var isOverIframe = false,
    windowLostBlur = function () {
        if (isOverIframe === true) {
            // DO STUFF
            isOverIframe = false;
        }
    };
    jQuery(window).focus();
    jQuery('#iframe').mouseenter(function(){
        isOverIframe = true;
        console.log(isOverIframe);
    });
    jQuery('#iframe').mouseleave(function(){
        isOverIframe = false;
        console.log(isOverIframe);
    });
    jQuery(window).blur(function () {
        windowLostBlur();
    });
};
iframeClick();

Pizzarob
quelle

3

http://jsfiddle.net/QcAee/406/

Machen Sie einfach eine unsichtbare Ebene über dem Iframe, die beim Klicken zurückgeht und beim Auslösen des Mouseleave-Ereignisses nach oben geht !!
Benötigen Sie jQuery

Diese Lösung verbreitet sich nicht beim ersten Klicken in den Iframe!

$("#invisible_layer").on("click",function(){
		alert("click");
		$("#invisible_layer").css("z-index",-11);

});
$("iframe").on("mouseleave",function(){
		$("#invisible_layer").css("z-index",11);
});

iframe {
    width: 500px;
    height: 300px;
}
#invisible_layer{
  position: absolute;
  background-color:trasparent;
  width: 500px;
  height:300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="message"></div>
<div id="invisible_layer">

</div>
<iframe id="iframe" src="//example.com"></iframe>

Erweitern Sie das Snippet

r1si
quelle

1

Dies funktioniert definitiv, wenn der Iframe von derselben Domain stammt wie Ihre übergeordnete Site. Ich habe es nicht für domänenübergreifende Websites getestet.

$(window.frames['YouriFrameId']).click(function(event){  /* do something here  */ });
$(window.frames['YouriFrameId']).mousedown(function(event){ /* do something here */ });
$(window.frames['YouriFrameId']).mouseup(function(event){ /* do something here */ });

Ohne jQuery könnten Sie so etwas versuchen, aber ich habe es auch nicht versucht.

window.frames['YouriFrameId'].onmousedown = function() { do something here }

Sie können sogar Ihre Ergebnisse filtern:

$(window.frames['YouriFrameId']).mousedown(function(event){   
  var eventId = $(event.target).attr('id');      
  if (eventId == 'the-id-you-want') {
   //  do something
  }
});

Jonathan Tonge
quelle

1

Kombinieren Sie die obige Antwort mit der Möglichkeit, immer wieder zu klicken, ohne außerhalb des Iframes zu klicken.

    var eventListener = window.addEventListener('blur', function() {
    if (document.activeElement === document.getElementById('contentIFrame')) {
        toFunction(); //function you want to call on click
        setTimeout(function(){ window.focus(); }, 0);
    }
    window.removeEventListener('blur', eventListener );
    });

Talha Asif
quelle

1

Wir können alle Klicks fangen. Die Idee ist, den Fokus auf ein Element außerhalb des iFrame nach jedem Klick zurückzusetzen:

    <input type="text" style="position:fixed;top:-1000px;left:-1000px">
    <div id="message"></div>
    <iframe id="iframe" src="//example.com"></iframe>
    <script>
        focus();
        addEventListener('blur', function() {
            if(document.activeElement = document.getElementById('iframe')) {
                message.innerHTML += 'Clicked';
                setTimeout(function () {
                    document.querySelector("input").focus();
                    message.innerHTML += ' - Reset focus,';
                }, 1000);
            }  
        });
    </script>

JSFiddle

Alexandre Muraviov
quelle

0

Ich glaube, Sie können so etwas tun:

$('iframe').contents().click(function(){function to record click here });

Verwenden Sie dazu jQuery.

Daniel Sellers
quelle

0

Wie dort zu finden: Erkennen Klicken Sie mit JavaScript auf Iframe

=> Wir können iframeTracker-jquery verwenden :

$('.carousel-inner .item').each(function(e) {
    var item = this;
    var iFrame = $(item).find('iframe');
    if (iFrame.length > 0) {
        iFrame.iframeTracker({
            blurCallback: function(){
                // Do something when iFrame is clicked (like firing an XHR request)
                onItemClick.bind(item)(); // calling regular click with right context
                console.log('IFrameClick => OK');
            }
        });
        console.log('IFrameTrackingRegistred => OK');
    }
})

Mickaël
quelle

0

Basierend auf der Antwort von Paul Draper habe ich eine Lösung erstellt, die kontinuierlich funktioniert, wenn Sie Iframes haben, die andere Registerkarten im Browser öffnen. Wenn Sie die Seite zurückgeben, bleiben Sie weiterhin aktiv, um den Klick auf das Framework zu erkennen. Dies ist eine sehr häufige Situation:

          focus();
        $(window).blur(() => {
           let frame = document.activeElement;
           if (document.activeElement.tagName == "IFRAME") {
             // Do you action.. here  frame has the iframe clicked
              let frameid = frame.getAttribute('id')
              let frameurl = (frame.getAttribute('src'));
           }            
        });

        document.addEventListener("visibilitychange", function () {
            if (document.hidden) {

            } else {
                focus();
            }
        });

Der Code ist einfach. Das Unschärfeereignis erkennt den Fokusverlust, wenn auf den Iframe geklickt wird, und testet, ob das aktive Element der Iframe ist (wenn Sie mehrere Iframes haben, können Sie wissen, wer ausgewählt wurde). Diese Situation tritt häufig auf, wenn Sie Werbeframes haben .

Das zweite Ereignis löst eine Fokusmethode aus, wenn Sie zur Seite zurückkehren. Es wird das Sichtbarkeitsänderungsereignis verwendet.

freedeveloper
quelle

0

Hier ist eine Lösung mit vorgeschlagenen Ansätzen mit Hover + Blur und Tricks für aktive Elemente, keine Bibliotheken, sondern nur reine js. Funktioniert gut für FF / Chrome. Der Ansatz entspricht größtenteils dem von @Mohammed Radwan vorgeschlagenen, außer dass ich eine andere von @ zone117x vorgeschlagene Methode verwende, um den Iframe-Klick für FF zu verfolgen, da window.focus ohne zusätzliche Benutzereinstellungen nicht funktioniert :

Fordert an, das Fenster nach vorne zu bringen. Es kann aufgrund von Benutzereinstellungen fehlschlagen und es wird nicht garantiert, dass das Fenster ganz vorne ist, bevor diese Methode zurückgegeben wird.

Hier ist die zusammengesetzte Methode:

function () {
    const state = {};

    (function (setup) {
        if (typeof window.addEventListener !== 'undefined') {
            window.addEventListener('load', setup, false);
        } else if (typeof document.addEventListener !== 'undefined') {
            document.addEventListener('load', setup, false);
        } else if (typeof window.attachEvent !== 'undefined') {
            window.attachEvent('onload', setup);
        } else {
            if (typeof window.onload === 'function') {
                const oldonload = onload;
                window.onload = function () {
                    oldonload();
                    setup();
                };
            } else {
                window.onload = setup;
            }
        }
    })(function () {
        state.isOverIFrame = false;
        state.firstBlur = false;
        state.hasFocusAcquired = false;

        findIFramesAndBindListeners();

        document.body.addEventListener('click', onClick);

        if (typeof window.attachEvent !== 'undefined') {
            top.attachEvent('onblur', function () {
                state.firstBlur = true;
                state.hasFocusAcquired = false;
                onIFrameClick()
            });
            top.attachEvent('onfocus', function () {
                state.hasFocusAcquired = true;
                console.log('attachEvent.focus');
            });
        } else if (typeof window.addEventListener !== 'undefined') {
            top.addEventListener('blur', function () {
                state.firstBlur = true;
                state.hasFocusAcquired = false;
                onIFrameClick();
            }, false);
            top.addEventListener('focus', function () {
                state.hasFocusAcquired = true;
                console.log('addEventListener.focus');
            });
        }

        setInterval(findIFramesAndBindListeners, 500);
    });

    function isFF() {
        return navigator.userAgent.search(/firefox/i) !== -1;
    }

    function isActiveElementChanged() {
        const prevActiveTag = document.activeElement.tagName.toUpperCase();
        document.activeElement.blur();
        const currActiveTag = document.activeElement.tagName.toUpperCase();
        return !prevActiveTag.includes('BODY') && currActiveTag.includes('BODY');
    }

    function onMouseOut() {
        if (!state.firstBlur && isFF() && isActiveElementChanged()) {
            console.log('firefox first click');
            onClick();
        } else {
            document.activeElement.blur();
            top.focus();
        }
        state.isOverIFrame = false;
        console.log(`onMouseOut`);
    }

    function onMouseOver() {
        state.isOverIFrame = true;
        console.log(`onMouseOver`);
    }

    function onIFrameClick() {
        console.log(`onIFrameClick`);
        if (state.isOverIFrame) {
            onClick();
        }
    }

    function onClick() {
        console.log(`onClick`);
    }

    function findIFramesAndBindListeners() {
        return Array.from(document.getElementsByTagName('iframe'))
            .forEach(function (element) {
                element.onmouseover = onMouseOver;
                element.onmouseout = onMouseOut;
            });
    }
}

slesh
quelle

Erkennen Klicken Sie mit JavaScript in Iframe

Antworten: