33 votes

Comment ajouter un événement de clic à un iframe avec JQuery

J'ai un iframe sur une page, provenant d'un tiers (une annonce). Je souhaite déclencher un événement de clic lorsque l'utilisateur clique sur l'iframe (pour enregistrer des statistiques internes). Quelque chose comme:

 $('#iframe_id').click(function() {
    //run function that records clicks
});
 

..basé sur HTML de:

 <iframe id="iframe_id" src="http://something.com"></iframe>
 

Je n'arrive pas à obtenir une variation de ce travail. Pensées?

27voto

Traveling Tech Guy Points 6975

Il n'y a pas d'événement 'onclick' pour un iframe, mais vous pouvez essayer d'attraper l'événement click du document dans l'iframe:

 document.getElementById("iframe_id").contentWindow.document.body.onclick = 
function() {
  alert("iframe clicked");
}
 

EDIT Bien que cela ne résolve pas votre problème de cross site, FYI jQuery a été mis à jour pour fonctionner correctement avec iFrames :

 $('#iframe_id').bind('click', function(event) { });
 

5voto

Vince Points 913

Essayez d’utiliser ceci: plugin iframeTracker jQuery , comme ceci:

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

1voto

Jimmy Points 3962

Si vous êtes d'accord avec l'hypothèse que vous avez cliqué sur iFrame, si l'utilisateur a déplacé la souris dessus, vous pouvez utiliser un logiciel comme celui-ci. Comment capturer l'événement click avec jQuery pour iframe?

1voto

ramigg Points 653

Aucune des réponses suggérées n'a fonctionné pour moi. J'ai résolu un cas similaire de la manière suivante:

 <a href="http://my-target-url.com" id="iframe-wrapper"></a>
<iframe id="iframe_id" src="http://something.com" allowtrancparency="yes" frameborder="o"></iframe>
 

Le css (bien sûr, le positionnement exact devrait changer en fonction des exigences de l'application):

 #iframe-wrapper, iframe#iframe_id {
  width: 162px;
  border: none;
  height: 21px;
  position: absolute;
  top: 3px;
  left: 398px;
}
#alerts-wrapper {
  z-index: 1000;
}
 

Bien sûr, vous pouvez maintenant capturer n’importe quel événement sur l’iframe-wrapper.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by: