Cliquez sur Iframe Détecter en utilisant JavaScript

Question

Je comprends qu'il est impossible de dire ce que l'utilisateur est en train de faire l'intérieur d'un iframe si elle est du domaine croix. Ce que je voudrais faire est de suivre si l'utilisateur a cliqué tout dans le iframe. J'imagine un scénario où il y a une div invisible au-dessus de la iframe et la div passe tout juste alors l'événement, cliquez sur le iframe.

est quelque chose comme cela possible? Dans ce cas, alors comment pourrais-je aller à ce sujet? Les annonces sont iframes, donc je n'ai aucun contrôle sur les balises qui sont utilisés.

Answer 1

  

est quelque chose comme ceci possible?

Non. Tout ce que vous pouvez faire est de détecter la souris d'entrer dans l'iframe, et potentiellement (mais pas fiable) quand il revient sur (ie. À essayer de comprendre la différence entre le passage du pointeur sur l'annonce sur son chemin un autre endroit par rapport persistante sur la ad).

  

J'imagine un scénario où il y a une div invisible au-dessus de l'iframe et la div passe tout juste alors l'événement click au iframe.

Non, il n'y a aucun moyen de simuler un événement click.

En attrapant la mousedown vous souhaitez empêcher le clic d'origine de se rendre à l'iframe. Si vous pouviez déterminer quand le bouton de la souris vous était sur le point d'être pressé pourrait essayer d'obtenir la div invisible de la route afin que le clic traverserait ... mais il y a aussi aucun cas qui se déclenche juste avant un mousedown.

Vous pouvez essayer de deviner, par exemple en cherchant à voir si le pointeur est venu pour se reposer, devinant un clic pourrait être sur le point de venir. Mais il est tout à fait fiable, et si vous vous ne venez-vous perdu un clic.

Answer 2

Ceci est certainement possible. Cela fonctionne dans Chrome, Firefox et IE 11 (et probablement d'autres).

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

jsFiddle

---

Avertissement: Ce ne détecte que le premier clic. Si je comprends bien, c'est tout ce que vous voulez.

Answer 3

Sur la base de la réponse de Mohammed Radwan je suis venu avec la solution jQuery suivante. Fondamentalement, ce qu'il fait est de garder une trace de ce que les gens iFrame sont en vol stationnaire. Ensuite, si la fenêtre brouille qui signifie probablement l'utilisateur a cliqué sur la bannière iFrame.

l'iframe doit être mis dans un div avec un id, pour vous assurer que vous savez qui iframe l'utilisateur a cliqué sur:

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

:

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

... ce qui maintient overiFrame à -1 quand aucun iFrames sont plané, ou l'ensemble de « bannerid » dans la div d'emballage quand un iframe est plané. Tout ce que vous devez faire est de vérifier si « overiFrame » est définie lorsque la fenêtre brouille, comme suit: ...

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

Une solution très élégante avec un petit inconvénient: si un utilisateur appuie sur ALT-F4 lors du survol de la souris sur un iFrame il ce journal en tant que clic. Cela ne se est passé dans FireFox cependant, IE, Chrome et Safari n'a pas l'enregistrer.

Merci encore Mohammed, solution très utile!

Answer 4

Il est petit, solution qui fonctionne dans tous les navigateurs, même IE8:

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

Vous pouvez tester ici: http://jsfiddle.net/oqjgzsm0/

Answer 5

Le code suivant vous montrera si le clic / vol stationnaire utilisateur ou de se déplacer hors de la 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>

Vous devez remplacer le src dans le iframe avec votre propre lien. Espérons que cela va aider. Cordialement, Mo.

Answer 6

Je viens de trouver cette solution ... Je l'ai essayé, je l'ai aimé ..

Travaux pour iframes domaine cross pour le bureau et mobile!

Je ne sais pas si elle est à toute épreuve encore

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

Happy codage

Answer 7

Vous pouvez y parvenir en utilisant l'événement de flou sur l'élément de fenêtre.

Voici un plugin jQuery pour le suivi, cliquez sur iframes (il se déclenche une fonction de rappel personnalisée lorsqu'un iframe est cliqué): https://github.com/finalclap/iframeTracker-jquery

Utilisez comme ceci:

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

Answer 8

voir http://jsfiddle.net/Lcy797h2/ pour ma longue solution poussif qui ne fonctionne pas fonctionner de manière fiable dans IE

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

Answer 9

Mohammed Radwan, Votre solution est élégante. Pour détecter les clics iFrame dans Firefox et IE, vous pouvez utiliser une méthode simple avec document.activeElement et une minuterie, mais ... je l'ai cherché partout sur les interwebs pour une méthode pour détecter les clics sur un iframe dans Chrome et Safari. Au bord de l'abandonner, je trouve votre réponse. Merci, monsieur!

Quelques conseils: J'ai trouvé votre solution pour être plus fiable lorsque vous appelez la fonction init () directement, plutôt que par attachOnloadEvent (). Bien sûr, pour ce faire, vous devez appeler init () seulement après l'iframe html. Donc, il ressemblerait à quelque chose comme:

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

Answer 10

Vous pouvez le faire à des événements de bulle document parent:

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

étendre Juste le eventlist pour d'autres événements.

Answer 11

Je suis tombé sur une situation où je devais suivre les clics sur un bouton de médias sociaux à travers un tiré iframe. Une nouvelle fenêtre sera ouverte lorsque le bouton a été cliqué. Voici ma solution était:

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

Answer 12

Cela fonctionne pour moi sur tous les navigateurs (Firefox inclus)

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>

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

Answer 13

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

Il suffit de faire une couche invisible sur l'iframe revenir quand cliquez et aller quand événement mouseleave sera tiré !!
Besoin jQuery

cette solution ne se propagent pas le premier clic à l'intérieur 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>

Answer 14

Cela fonctionne vraiment si l'iframe est du même domaine que votre site parent. Je ne l'ai pas testé pour les sites inter-domaines.

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

Sans jQuery, vous pouvez essayer quelque chose comme ça, mais encore une fois je n'ai pas essayé.

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

Vous pouvez même filtrer vos résultats:

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

Answer 15

Je crois que vous pouvez faire quelque chose comme:

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

en utilisant jQuery pour y parvenir.

Answer 16

trouvé là: Cliquez sur Iframe Détecter l'aide de JavaScript

=> Nous pouvons utiliser 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');
    }
})

Answer 17

D'après la réponse de Paul Draper, j'ai créé une solution qui fonctionne en permanence lorsque vous avez Iframe qui ouvrent d'autres onglet dans le navigateur. Lorsque vous revenez la page continue d'être actif pour détecter le clic sur le cadre, la situation est très courante:

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

Le code est simple, l'événement de flou détecter la perte de mise au point lorsque l'iframe est cliqué, et tester si l'élément actif est l'iframe (si vous avez plusieurs iframe, vous pouvez savoir qui a été sélectionné) cette situation est fréquemment lorsque vous ont des cadres de publicité.

Le second événement déclenche une méthode de mise au point lorsque vous revenez à la page. il est utilisé l'événement de changement de visibilité.

Answer 18

Voici la solution en utilisant des approches proposées avec vol stationnaire + flou et astuces d'éléments actifs, aucune bibliothèque, à seulement js pures. Fonctionne très bien pour FF / Chrome. La plupart du temps approache est le même que @Mohammed Radwan a proposé, à l'exception que j'utilise différentes méthode proposée par @ zone117x pour suivre iframe cliquez pour FF, parce que window.focus ne fonctionne pas sans ajout paramètres utilisateur :

  

fait une demande pour amener la fenêtre à l'avant. Il peut échouer à cause de   les paramètres utilisateur et la fenêtre est pas garantie avant en avant   cette méthode retourne.

Voici composé méthode:

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

Answer 19

La combinaison de réponse ci-dessus avec la capacité de cliquer encore et encore sans cliquer en dehors iframe.

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