Erkennen, Klicken Sie in Iframe mit JavaScript

Ich verstehe, dass es nicht möglich ist, zu sagen, was der Benutzer tut, innerhalb einer iframe wenn es cross-domain. Was würde ich gerne tun, ist zu verfolgen, ob der Benutzer geklickt hat, überhaupt in der iframe. Ich Stelle mir ein Szenario, wo es ist eine unsichtbare div auf der Oberseite des iframe und die div wird nur dann das click-Ereignis der iframe.

Ist so etwas möglich? Wenn es ist, dann wie würde ich es angehen? Die iframes sind anzeigen, also ich habe keine Kontrolle über die tags, die verwendet werden.

Es ist möglich und es ist crossbrowser Lösung: stackoverflow.com/a/32138108/1064513

InformationsquelleAutor Russ Bradberry | 2010-03-04

35

Ist so etwas möglich?

Nicht. Alles, was Sie tun können, ist zu erkennen, die Maus geht in das iframe, und möglicherweise (wenn auch nicht zuverlässig), wenn es kommt wieder raus (dh. versucht, herauszufinden, den Unterschied zwischen der Zeiger geht über die Anzeige auf seinem Weg woanders versus Verweilen auf der Anzeige).

Ich Stelle mir ein Szenario wo es ein unsichtbares div-Element auf der Oberseite des iframe und der div wird nur dann das click-Ereignis auf den iframe.

NÖ, es gibt keinen Weg, um gefälschte einem click-Ereignis.

Durch den Fang das mousedown-Sie würde verhindern, dass die ursprüngliche auf von der iframe. Wenn Sie könnten bestimmen, Wann Sie die Maustaste darüber gedrückt werden, könnte man versuchen, den unsichtbaren div aus dem Weg, so dass die auf gehen würde... aber es ist auch kein Ereignis, das ausgelöst wird, kurz bevor ein mousedown.

Könnten Sie versuchen, zu erraten, zum Beispiel durch einen Blick zu sehen, wenn der Zeiger zur Ruhe gekommen, zu raten, ein Klick kann sich über zu kommen. Aber es ist Total unzuverlässig, und wenn Sie fehlschlagen, Sie habe nur verloren, sich selbst eine "click-through".

Das ist möglich: stackoverflow.com/a/23231136/1212596
Ja, ist es. Und es ist crossbrowser Lösung: stackoverflow.com/a/32138108/1064513
Ich überprüfte diese links und ich denke, dass die Antwort richtig ist. Sie können nur erkennen Sie in der iframe-aber nicht das, was geklickt wurde.
Ich downvote, nur weil es nicht ganz stimmt. Das meiste, was Sie sagen, ist wahr, aber es gibt Möglichkeiten, wie ist die mehr beliebt, Antwort auf diesen thread.

InformationsquelleAutor bobince
119

Ist dies sicherlich möglich. Dies funktioniert in Chrome, Firefox und IE 11 (und wahrscheinlich noch andere).
```
focus();
var listener = window.addEventListener('blur', function() {
    if (document.activeElement === document.getElementById('iframe')) {
        //clicked
    }
    window.removeEventListener('blur', listener);
});
```
JSFiddle

Anmerkung: in Dieser erkennt nur den ersten Klick. So wie ich das verstehe, ist alles, was Sie wollen.

Frage mich, warum diese Antwort wurde 0 upvotes. Es funktioniert wirklich.
es ist, weil es wurde 4 Jahre nach der Frage, und die Menschen in der Regel nicht, Blättern Sie vorbei an den ersten paar Antworten.
Auch der Hinweis ist, dass, wenn Sie änderungen browser-tabs wird es Feuer-die focus();
Es funktioniert NICHT in Firefox. JSFiddle enthält Fehler, verbergen: = anstelle von ===. Es ist crossbrowser-Lösung (auch im IE8): stackoverflow.com/a/32138108/1064513
Das blur-Ereignis nicht ausgelöst, wenn der Benutzer nicht klicken Sie in der Haupt-Dokument zuerst! Dies ist auch nicht brauchbar für die Erkennung von Klicks auf mehrere iframes, da es kein Ereignis, das feuert, wenn sich der Fokus ändert sich von einem iframe auf ein anderes iframe ist blur - Ereignis nicht ausgelöst).

InformationsquelleAutor Paul Draper
103

Basierend auf Mohammed Radwan Antwort kam ich mit den folgenden jQuery-Lösung. Im Grunde, was Sie tut, ist zu verfolgen, was iFrame Menschen schwebt. Dann, wenn das Fenster verwischt, dass die meisten wahrscheinlich bedeutet, dass der Benutzer auf die iframe-banner.

den iframe, sollte in ein div mit einer id, um sicherzustellen, dass Sie wissen, welche iframe, den der Benutzer geklickt auf:
```
<div class='banner' bannerid='yyy'>
    <iframe src='http://somedomain.com/whatever.html'></iframe>
<div>
```
also:
```
$(document).ready( function() {
    var overiFrame = -1;
    $('iframe').hover( function() {
        overiFrame = $(this).closest('.banner').attr('bannerid');
    }, function() {
        overiFrame = -1
    });
```
...
dies hält overiFrame bei -1, wenn keine iFrames schwebte, oder die 'bannerid' in die Umhüllung div, wenn ein iframe schwebte. Alles, was Sie tun müssen ist, überprüfen Sie, ob 'overiFrame' wird gesetzt, wenn das Fenster Unschärfen, 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 drückt ALT-F4, wenn Sie den Mauszeiger über ein iFrame-es wird protokolliert, es wird ein Klick. Dies passiert nur im FireFox, obwohl, IE, Chrome und Safari nicht registrieren, es.

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

Ich sehe in meinen Statistiken habe dadurch ein downvote... ehm... warum??
Schraube, idiot, wer das gemacht hat!!!! Super Antwort, aber, danke. 🙂
Funktioniert auf FF, Chrome, Oper, IE 11. Gott segne Euch 🙂
Funktioniert sogar auf google-AdSense-anzeigen 🙂
Diese Antwort ist die beste von Ihnen, jedoch, wenn Sie erhalten möchten jeden Klick in den iframe, müssen Sie den Fokus aus, sobald der Benutzer geklickt hat, um zu überwachen, weitere Klicks. Diese sollten Hinzugefügt werden um die $(window).blur() Abschnitt: setTimeout(function(){ window.focus(); }, 0);. Nun klickt der Benutzer auf, legt den Fokus im iframe das script zieht, den Fokus zurück, und Sie können jetzt überwachen weiterer Schwerpunkt änderungen von zukünftigen Klicks.

InformationsquelleAutor patrick
72

Dies ist die kleine Lösung, die funktioniert in allen Browsern, auch IE8:
```
var monitor = setInterval(function(){
    var elem = document.activeElement;
    if(elem && elem.tagName == 'IFRAME'){
        clearInterval(monitor);
        alert('clicked!');
    }
}, 100);
```
Können Sie es hier testen: http://jsfiddle.net/oqjgzsm0/

Was, wenn Sie mehrere iframes und Sie nicht wissen, Ihre id?
Dies funktionierte perfekt für mich. Danke!!!
nur cross-browser-zuverlässige Lösung, die funktioniert auch in der neuesten FF! Thx a lot. Es verdient mehr upvotes
Nur bekommen elem.id, das ist Ihre iframe-id :). Siehe jsfiddle.net/oqjgzsm0/219
Abgesehen von der Tatsache, dass mit einem kontinuierlich Schleife Intervall, in solcher Kurs ist nicht eine sehr gute Idee, dies zu erkennen, Fehlalarme, wenn der Benutzer den Fokus auf das iframe durch tab-Taste navigation

InformationsquelleAutor Dmitry Kochin

Dem folgenden code wird Ihnen zeigen, wenn der Benutzer auf/schweben oder aus dem iframe:-

<!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>

Müssen Sie ersetzen die src des iframe mit Ihren eigenen link. Hoffe, das wird helfen.
Grüße,
Mo.

Basierend auf der schnellen Prüfung, die gegeben Beispiel (nach Korrektur der URL) scheint zu funktionieren, auch im IE 8, einigermaßen zuverlässig in Chrome 14.0.835.186 m, nicht aber in Firefox 6.0.2.
Scheint nicht zu funktionieren hier mit einem youtube-iframe.
Funktioniert bei Chrome, aber nicht Firefox v62, denn wenn klicken Sie auf iframe blur - Ereignis wird nicht ausgelöst

InformationsquelleAutor Mohammed Radwan

10

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

Werke für cross-domain-iframe für desktop und mobile!

Weiß nicht, ob es ist kinderleicht und doch
```
window.addEventListener('blur',function(){
      if(document.activeElement.id == 'CrossDomainiframeId'){
        //do something :-)
      }
});
```
Happy coding

Diese gleiche Antwort (vielleicht eine etwas bessere version) veröffentlicht wurde, die ein Jahr zuvor hier auf dieser selben Seite: stackoverflow.com/a/23231136/470749

InformationsquelleAutor Tony
5

Können Sie erreichen dies, indem Sie den blur-event auf window-element.

Hier ist ein jQuery-plugin für tracking-klicken Sie auf iframes (es wird Feuer eine benutzerdefinierte callback-Funktion, wenn ein iframe geklickt wird) :
https://github.com/finalclap/iframeTracker-jquery

Verwenden Sie es wie diese :
```
jQuery(document).ready(function($){
    $('.iframe_wrap iframe').iframeTracker({
        blurCallback: function(){
            //Do something when iframe is clicked (like firing an XHR request)
        }
    });
});
```
Awseom Bibliothek!

InformationsquelleAutor Vince

sehen http://jsfiddle.net/Lcy797h2/ für meine langatmige Lösung, die nicht zuverlässig arbeiten, in Internet Explorer

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

dieser code funktioniert nicht in IE8 🙁
Seine awesome coding Mann.... was ich eigentlich will...+1 @Omar Jackman.. so viel hilfreich zu erfassen, klicken Sie auf youtube-Werbung

InformationsquelleAutor DiverseAndRemote.com

Mohammed Radwan,
Deine Lösung ist elegant. Zu erkennen iframe-Klicks in Firefox und IE verwenden, können Sie eine einfache Methode mit dem Dokument.activeElement und einen timer, aber... ich habe gesucht alle über das interwebs für eine Methode zur Erkennung von Klicks auf ein iframe in Chrome und Safari. Am Rande des Aufgebens, ich finde Ihre Antwort. Danke, sir!

Einige Tipps:
Ich habe festgestellt, dass Ihre Lösung mehr zuverlässig, wenn sich der Aufruf der init () - Funktion direkt, anstatt durch attachOnloadEvent(). Natürlich, das zu tun, müssen Sie den Aufruf init() erst nach den iframe-html. So würde es 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>

InformationsquelleAutor zone117x

Können Sie dies tun, um bubble Veranstaltungen zu übergeordneten Dokument:

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

Verlängern Sie einfach die ereignissübersicht für weitere Veranstaltungen.

Ich benutzt 'touchend-event-und es funktionierte! Deine Antwort hat mir sehr geholfen!

InformationsquelleAutor Taner Topal

Lief ich in eine situation, wo ich musste, Klicks auf social-media-button gezogen wird durch ein iframe. Einem neuen Fenster geöffnet werden würden, wenn die Schaltfläche geklickt wurde. 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();

InformationsquelleAutor pizza-r0b

Diese funktioniert auf jeden Fall, wenn der iframe von der selben domain wie Ihre übergeordneten Website. Ich habe es nicht getestet für cross-domain-Websites.

$(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 Sie könnten versuchen, so etwas wie dieses, aber wieder habe ich nicht versucht, diese.

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

Können Sie sogar filtern Sie Ihre Ergebnisse:

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

InformationsquelleAutor Jonathan Tonge

0

Ich glaube, Sie können etwas tun:
```
$('iframe').contents().click(function(){function to record click here });
```
mithilfe von jQuery um dies zu erreichen.

nicht für mich arbeiten.
Hat bei mir nicht funktioniert entweder. Ich wünschte, es Tat.
dies funktioniert nur bei gleichen Ursprung iframes

InformationsquelleAutor Daniel Sellers

Als dort gefunden : Erkennen, Klicken Sie in Iframe mit JavaScript

=> Wir können iframeTracker-jquery :

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

InformationsquelleAutor Mickaël

Basiert in der Antwort von Paul Draper, habe ich eine Lösung, die kontinuierlich arbeiten, wenn Sie haben, Iframes, dass andere öffnen " im browser. Zurück, wenn man die Seite weiter aktiv sein zu erkennen, klicken Sie über dem Rahmen, 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 blur-Ereignis erkennen, die den Verlust des Fokus, wenn Sie den iframe geklickt wird, und testen Sie, ob das aktive element ist das iframe (, wenn mehrere iframe können Sie wissen, wer ausgewählt wurde) diese situation ist Häufig, wenn Sie publicity-frames.

Den zweiten event auslösen focus-Methode, wenn Sie zu der Seite zurückkehren. es wird verwendet, die Sichtbarkeit change-Ereignis.

InformationsquelleAutor freedeveloper

Hier ist die Lösung mit Hilfe empfohlene Vorgehensweisen bei hover+Unschärfe und aktive element tricks, keine Bibliotheken, nur reines js. Funktioniert gut, für FF/Chrome. Meist approache ist die gleiche wie @Mohammed Radwan vorgeschlagen, außer, dass ich die andere Methode vorgeschlagen von @zone117x zu verfolgen iframe klicken Sie auf für FF, weil Fenster.Fokus funktioniert nicht ohne den Zusatz Benutzer-Einstellungen:

Macht eine Anfrage an das Fenster auf der Vorderseite. Es kann fehlschlagen, aufgrund
Benutzer-Einstellungen und das Fenster ist nicht garantiert vordersten vor
diese Methode gibt.

Hier ist die Verbindung 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;
            });
    }
}

InformationsquelleAutor slesh

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.