Détecter le clic sur un Iframe

FactureHero.com
Javascript

Hello,
J'ai mon bout de code basé sur la détection du blur et du focus pour détecter le clic sur une iframe. Tout est ok.

Mais (et oui il y a un mais :) ) , je voudrai que ce clic utilisateur ne soit détecté qu'une seule fois tant que l'utilisateur reste sur cette page courante,
or pour le moment le clic est détecté... à chaque clic de l'utilisateur sur cette zone.

Voici le code actuel qui affiche une div de class alert au clic du user sur l'élément qui a la class ".track-video-playing" sur la page (L'astuce ici est que l'événement blur détecte le clic sur mon élément qui contient une iframe, car lorsqu'on clique sur une iframe, la page web perd le focus) : 

 $(document).ready(function() {
    // Affichage de l'élément actif (pour aider à comprendre ce qui se passe)
    //setInterval(function(){
    //    $('#actif').text(document.activeElement.tagName);
    //}, 100);

    // Initialisation variable
    iframe_survol = false;

    // Surveillance frontière
    $('.track-video-playing').mouseover(function(){
        iframe_survol = true;
    }).mouseout(function(){
        iframe_survol = false;
    });

    // On donne le focus à la fenêtre au chargement
    $(window).focus();

    // Ecoute blur
    $(window).blur(function(e){

        $('<div class="alert alert-success text-center">').html("<i style='vertical-align: middle; opacity:0.6; font-size:1.5em; margin-right:11px' class='fa fa-caret-square-o-right'></i> Bon visionnage ... et bonne mise en pratique").appendTo('#consoleDebug').delay(3000).slideUp();
        $('.track-video-playing').removeClass('track-video-playing');
         iframe_survol = false;
    });
    // Retour du focus sur la page au survol
    $(document).mousemove(function(e){
        if( document.activeElement.tagName == 'IFRAME' ){
            $(window).focus();
        }
    });
});

4 réponses

Grafikart
Réponse acceptée

Crée une variable "click_detected" et si la valeur est ok ben tu ne fais rien ou tu peux unbind() après le premier click

FactureHero.com
Auteur
Réponse acceptée

au cas où, si ça peut servir parce que j'ai un peu galéré à trouver :) Voici un bout de code que j'ai arrangé en adoptant la solution de GA plus haut. Ca fonctionne. Ca détecte bien le clic sur un élément div qui entoure mon iframe et une seule fois. Pour être clair, je voulais faire ça pour publier une action sur Facebook lorsque l'utilisateur clique sur la lecture d'une vidéo Youtube sur mon site. Mais évidemment si le clic était détecté à chaque fois qu'il stoppe ou relance la vidéo, ça aurait été très spammant ... je voulais donc détecter son 1er clic et ignorer les suivants tant que l'user est sur la page. Voici le code adapté qui fonctionne et qui n'est pas trop lourd :

    var iframeClick = function () {
    var clickDetected = 0;
    var isOverIframe = false,

    windowLostBlur = function () {  
        if(clickDetected === 0) {
        if (isOverIframe === true) {
            // DO STUFF
            alert('super voilà ton 1er clic!');
            clickDetected = 1;
            isOverIframe = false;
        }
    } else {
        alert ('tu as déjà cliqué une fois ça suffit !');
    }

    };
    jQuery(window).focus();
    jQuery('.track-video-playing').mouseenter(function(){
        isOverIframe = true;
        console.log(isOverIframe);
    });
    jQuery('.track-video-playing').mouseleave(function(){
        isOverIframe = false;
        console.log(isOverIframe);
    });
    jQuery(window).blur(function () {
        windowLostBlur();
    });
    };

    iframeClick();

encore merci Grafikart ;)

antho07

Bonjour,

je n'ai pas compris le besoin.

Peux-tu préciser : "tant que l'utilisateur reste sur cette page courante" ?

La page à l'extérieur de l'iframe ou dans l'iframe ?

FactureHero.com
Auteur

Merci antho07, en fait je voulais dire tant que l'user reste sur la page (iframe ou pas iframe :) )

Merci beaucoup Grafikart !
Pourquoi quand on nous le dit, ça paraît toujours évident :) J'ai besoin d'encore un peu de pratique sur JS et Jquery :)

Merci à toi pour la soluce. Et tout le reste évidemment. GA, j'suis fan, j'me suis pour ainsi dire formé chez toi ;)