Klick in Iframe mit JavaScript erkennen

Ich verstehe, dass es nicht möglich ist zu sagen, was der Benutzer in einem tut iframe wenn es domänenübergreifend ist. Was ich tun möchte, ist zu verfolgen, ob der Benutzer überhaupt darauf geklickt hat iframe. Ich stelle mir ein Szenario vor, in dem es ein Unsichtbares gibt div oben auf iframe und die div wird nur dann das Click-Ereignis an die übergeben iframe.

Ist so etwas möglich? Wenn ja, wie würde ich dann vorgehen? Die iframes sind Anzeigen, daher habe ich keine Kontrolle über die verwendeten Tags.

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

const message = document.getElementById("message");

// main document must be focused in order for window blur to fire when the iframe is interacted with. 
// There's still an issue that if user interacts outside of the page and then click iframe first without clicking page, the following logic won't run. But since the OP is only concerned about first click this shouldn't be a problem.
window.focus()

window.addEventListener("blur", () => {
  setTimeout(() => {
    if (document.activeElement.tagName === "IFRAME") {
      message.textContent = "clicked " + Date.now();
      console.log("clicked");
    }
  });
}, { once: true });

<div id="message"></div>
<iframe width="50%" height="300" src="https://example.com"></iframe>

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

Basierend auf der Antwort von Mohammed Radwan habe ich mir die folgende jQuery-Lösung ausgedacht. Im Grunde verfolgt es, was iFrame-Leute schweben. Wenn das Fenster dann 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>

damit:

$(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 bewegt werden, oder die ‘bannerid’, die im Wrapping-Div gesetzt ist, wenn ein iframe bewegt wird. Alles, was Sie tun müssen, ist zu prüfen, ob ‘overiFrame’ gesetzt ist, wenn das Fenster unscharf wird, etwa so: …

    $(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 ALT-F4 drückt, während er mit der Maus über einen iFrame fährt, wird dies als Klick protokolliert. Dies geschah jedoch nur in FireFox, IE, Chrome und Safari haben es nicht registriert.

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

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

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

Hier kannst du es testen: http://jsfiddle.net/oqjgzsm0/

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 (d. h. versuchen, den Unterschied zwischen dem Mauszeiger, der auf seinem Weg an eine andere Stelle über die Anzeige fährt, und dem Verweilen herauszufinden auf der Anzeige).

Ich stelle mir ein Szenario vor, in dem sich ein unsichtbares Div über dem Iframe befindet und das Div das Click-Ereignis einfach an den Iframe weitergibt.

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

Indem Sie das Mousedown abfangen, würden Sie verhindern, dass der ursprüngliche Klick zum Iframe gelangt. Wenn Sie feststellen könnten, wann die Maustaste gedrückt werden sollte, 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 zum Beispiel nachsehen, ob der Zeiger zur Ruhe gekommen ist, und vermuten, dass ein Klick kurz bevorsteht. Aber es ist völlig unzuverlässig, und wenn Sie versagen, haben Sie nur einen Klick verloren.

Der folgende Code zeigt Ihnen, ob der Benutzer auf den Iframe klickt/schwebt oder sich aus ihm herausbewegt:-

<!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 hilft. Grüße, Mo.

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 Mobilgeräte!

Weiß noch nicht, ob es idiotensicher ist

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

Viel Spaß beim Codieren

Sie können dies erreichen, indem Sie das Blur-Ereignis für das Fensterelement verwenden.

Hier ist ein jQuery-Plugin zum Verfolgen von Klicks auf Iframes (es löst eine benutzerdefinierte Callback-Funktion aus, wenn auf ein Iframe geklickt wird):
https://github.com/finalclap/iframeTracker-jquery

Verwenden Sie es wie folgt:

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