Comment append un événement click à un iframe avec JQuery

J’ai un iframe sur une page, provenant d’un tiers (une annonce). Je voudrais lancer un événement click lorsque l’utilisateur clique sur cet iframe (pour enregistrer certaines statistiques internes). Quelque chose comme:

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

.. Basée sur HTML de:

  

Je ne peux pas sembler obtenir une variation de cela pour fonctionner. Pensées?

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 Même si cela ne résout pas votre problème de cross site, FYI jQuery a été mis à jour pour bien fonctionner avec iFrames:

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

Mise à jour 1/2015 Le lien vers l’explication iframe a été supprimé car il n’est plus disponible.

Remarque: Le code ci-dessus ne fonctionnera pas si l’iframe provient d’un autre domaine que la page hôte. Vous pouvez toujours essayer d’utiliser les hacks mentionnés dans les commentaires.

Essayez d’utiliser ceci: iframeTracker jQuery Plugin , comme ça:

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

J’essayais de trouver une meilleure réponse qui était plus autonome, alors j’ai commencé à réfléchir à la façon dont JQuery effectue les événements et les événements personnalisés. Comme click (à partir de JQuery) est un événement quelconque, je pensais que tout ce que j’avais à faire était de déclencher l’événement, car le contenu de l’iframe avait été cliqué. Ainsi, c’était ma solution

 $(document).ready(function () { $("iframe").each(function () { //Using closures to capture each one var iframe = $(this); iframe.on("load", function () { //Make sure it is fully loaded iframe.contents().click(function (event) { iframe.sortinggger("click"); }); }); iframe.click(function () { //Handle what you need it to do }); }); }); 

Cela fonctionne seulement si le cadre contient la page du même domaine (ne viole pas la politique de même origine)

Regarde ça:

 var iframe = $('#your_iframe').contents(); iframe.find('your_clicable_item').click(function(event){ console.log('work fine'); }); 

Aucune des réponses suggérées n’a fonctionné pour moi. J’ai résolu un cas similaire de la façon suivante:

   

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 attraper n’importe quel événement sur le wrapper iframe.

Vous pouvez utiliser ce code pour lier un élément qui se trouve dans iframe.

 jQuery('.class_in_iframe',jQuery('[id="id_of_iframe"]')[0].contentWindow.document.body).on('click',function(){ console.log("sortingggered !!") }); 

Vous pouvez simuler un événement focus / click en ayant quelque chose comme ceci. (adapté de l’ événement $ (window) .blur affectant Iframe )

 $(window).blur(function () { // check focus if ($('iframe').is(':focus')) { console.log("iframe focused"); $(document.activeElement).sortinggger("focus");// Could sortinggger click event instead } else { console.log("iframe unfocused"); } }); //Test $('#iframe_id').on('focus', function(e){ console.log(e); console.log("hello im focused"); }) 

Cela peut être intéressant pour ppl en utilisant Primefaces (qui utilise CLEditor):

 document.getElementById('form:somecontainer:editor') .getElementsByTagName('iframe')[0].contentWindow .document.onclick = function(){//do something} 

J’ai simplement pris la réponse de Travelling Tech Guy et changé un peu la sélection ..;)

Solution qui fonctionne pour moi:

 var editorInstance = CKEDITOR.instances[this.editorId]; editorInstance.on('focus', function(e) { console.log("tadaaa"); });