Come aggiungere un evento click a un iframe con JQuery

Ho un iframe su una pagina, proveniente da una terza parte (un annuncio). Mi piacerebbe lanciare un evento click quando quell’iframe è cliccato su (per registrare alcune statistiche interne). Qualcosa di simile a:

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

.. basato su HTML di:

  

Non riesco a ottenere alcuna variazione di questo per funzionare. Pensieri?

Non esiste un evento ‘onclick’ per un iframe, ma puoi provare a catturare l’evento click del documento nell’iframe:

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

EDIT Anche se questo non risolve il problema di cross site, FYI jQuery è stato aggiornato per giocare bene con iFrame:

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

Aggiornamento 1/2015 Il link alla spiegazione dell’iframe è stato rimosso poiché non è più disponibile.

Nota Il codice sopra non funzionerà se l’iframe proviene da un dominio diverso rispetto alla pagina host. Puoi ancora provare a utilizzare gli hack menzionati nei commenti.

Prova a usare questo: iframeTracker jQuery Plugin , in questo modo:

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

Stavo cercando di trovare una risposta migliore che fosse più autonoma, così ho iniziato a pensare a come JQuery fa eventi ed eventi personalizzati. Poiché click (da JQuery) è un evento qualsiasi, ho pensato che tutto ciò che dovevo fare era triggersre l’evento dato che il contenuto dell’iframe è stato cliccato. Quindi, questa era la mia soluzione

 $(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 }); }); }); 

Funziona solo se la cornice contiene una pagina dello stesso dominio (non viola la politica della stessa origine)

Guarda questo:

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

Nessuna delle risposte suggerite ha funzionato per me. Ho risolto un caso simile nel seguente modo:

   

Il css (ovviamente il posizionamento esatto dovrebbe cambiare in base ai requisiti dell’app):

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

Ovviamente ora puoi prendere qualsiasi evento sul wrapper iframe.

È ansible utilizzare questo codice per associare il clic su un elemento che si trova in iframe.

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

È ansible simulare un evento focus / click avendo qualcosa di simile al seguente. (adattato da $ (window) .blur event che interessa 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"); }) 

Questo può essere interessante per ppl usando Primefaces (che usa CLEditor):

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

Fondamentalmente ho appena preso la risposta da Traveling Tech Guy e ho cambiato la selezione un po ‘..;)

Soluzione che funziona per me:

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