Como adicionar um evento de clique a um iframe com o JQuery

Eu tenho um iframe em uma página, vindo de um terceiro (um anúncio). Gostaria de triggersr um evento de clique quando o iframe for clicado (para registrar algumas statistics internas). Algo como:

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

..baseado em HTML de:

  

Eu não consigo fazer qualquer variação disso funcionar. Pensamentos?

Não há evento ‘onclick’ para um iframe, mas você pode tentar capturar o evento click do documento no iframe:

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

EDIT Apesar de isso não resolver o problema do cross site, o FYI jQuery foi atualizado para funcionar bem com os iFrames:

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

Atualização 1/2015 O link para a explicação do iframe foi removido porque não está mais disponível.

Nota O código acima não funcionará se o iframe for de domínio diferente da página do host. Você ainda pode tentar usar hacks mencionados nos comentários.

Tente usar isso: iframeTracker jQuery Plugin , assim:

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

Eu estava tentando encontrar uma resposta melhor que fosse mais autônoma, então comecei a pensar sobre como o JQuery faz events e events personalizados. Como o clique (da JQuery) é qualquer evento, achei que tudo o que precisei fazer foi acionar o evento, pois o conteúdo do iframe foi clicado. Assim, esta foi a minha solução

 $(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.trigger("click"); }); }); iframe.click(function () { //Handle what you need it to do }); }); }); 

Ele funciona somente se o quadro contiver uma página do mesmo domínio (não violar a política de mesma origem)

Veja isso:

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

Nenhuma das respostas sugeridas funcionou para mim. Eu resolvi um caso semelhante da seguinte maneira:

   

O css (é claro que o posicionamento exato deve mudar de acordo com os requisitos do aplicativo):

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

Claro que agora você pode pegar qualquer evento no empacotador de iframe.

Você pode usar este código para vincular clique em um elemento que está no iframe.

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

Você poderia simular um evento de foco / clique tendo algo como o seguinte. (adaptado do evento $ (window) .blur afetando o Iframe )

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

Isso pode ser interessante para ppl usando Primefaces (que usa o CLEditor):

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

Eu basicamente peguei a resposta do Traveling Tech Guy e mudei um pouco a seleção ..;)

Solução que funciona para mim:

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