Détecter Cliquez dans l'Iframe à l'aide de JavaScript

Question

Détecter Cliquez dans l'Iframe à l'aide de JavaScript

Demandé el 4 de Mars, 2010: Quand la question a-t-elle été
40872 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je comprends qu'il n'est pas possible de dire ce que l'utilisateur est en train de faire à l'intérieur d'un iframe si c'est la croix de domaine. Ce que je voudrais faire est de vérifier si l'utilisateur a cliqué dans l' iframe. J'imagine un scénario où il y a un invisible div sur le haut de la iframe et de la div sera seulement ensuite passer à l'événement click à l' iframe.

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

Demandé el 4 de Mars, 2010 par Russ Bradberry

Answer 1

5 Réponses

Answer 2

196voto

Paul Draper Points 14352

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

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

JSFiddle

Mise en garde: Ce ne détecte que le premier clic. Ce que je comprends, c'est tout ce que vous voulez.

Répondu el 22 de Avril, 2014 par Paul Draper (14352 Points )

Answer 3

113voto

patrick Points 2038

Basé sur Mohamed Radwan réponse, je suis venu avec la suite de jQuery solution. Essentiellement, ce qu'il fait est de garder une trace de ce iFrame gens sont en vol stationnaire. Ensuite, si la fenêtre de flou qui signifie très probablement que l'utilisateur a cliqué sur l'iframe bannière.

l'iframe doit être placé dans un div avec un id, assurez-vous de savoir qui iframe l'utilisateur a cliqué sur:

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

donc:

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

... cela permet de maintenir overiFrame à -1 quand pas les iFrames sont plané, ou de la "bannerid' dans l'emballage div lorsqu'une iframe est planait. Tout ce que vous avez à faire est de vérifier si "overiFrame' est activée lorsque la fenêtre de flou, comme ceci: ...

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

Très élégant avec un mineur inconvénient: si un utilisateur appuie sur ALT-F4 lorsque le curseur de la souris au-dessus d'un iFrame dans le fichier journal comme un clic. Cela s'est produit seulement dans FireFox, cependant, IE, Chrome et Safari n'a pas l'enregistrer.

Merci encore Mohammed, très utile!

Répondu el 12 de Novembre, 2011 par patrick (2038 Points )

Answer 4

44voto

bobince Points 270740

Est quelque chose comme cela possible?

Pas de. Tout ce que vous pouvez faire est de détecter la souris va dans l'iframe, et éventuellement (mais pas de façon fiable), quand il s'agit de retour (ie. essayer de travailler sur la différence entre le pointeur de passage sur l'annonce sur son chemin quelque part d'autre rapport s'attarde sur l'annonce).

J'imagine un scénario où il y a un div invisible sur le dessus de l'iframe et le la div sera seulement ensuite passer à l'événement click de l'iframe.

Non, il n'y a aucun moyen de faux d'un événement de clic.

Par la capture de l'mousedown vous auriez du prévenir l'original, cliquez sur à partir d'arriver à l'iframe. Si vous pouviez déterminer quand le bouton de la souris est sur le point d'être pressé, vous pourriez essayer d'obtenir l'invisible div de façon à ce que le déclic ne passe au travers... mais il n'y a également aucun événement qui se déclenche juste avant un mousedown.

Vous pouvez essayer de deviner, par exemple par la recherche pour voir si le pointeur est venu pour se reposer, devinant un clic pourrait être sur le point de venir. Mais il est totalement fiable, et si vous échouez, vous avez juste perdu un click-through.

Répondu el 4 de Mars, 2010 par bobince (270740 Points )

Answer 5

38voto

Mohammed Radwan Points 231

Le code suivant va vous montrer si l'utilisateur clic/hover ou sortir de l'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 la src de l'iframe avec votre propre lien. Espérons que cela va aider. En ce qui concerne, Mo.

Répondu el 13 de Juin, 2010 par Mohammed Radwan (231 Points )

Answer 6

5voto

Omar Jackman Points 6632

voir http://jsfiddle.net/kU3Tw/ pour ma longue haleine solution qui ne fonctionne pas 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();

Répondu el 14 de Février, 2013 par Omar Jackman (6632 Points )

Détecter Cliquez dans l'Iframe à l'aide de JavaScript

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Détecter Cliquez dans l'Iframe à l'aide de JavaScript

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: