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"); });