So fügen Sie ein Click-Ereignis zu einem Iframe mit JQuery hinzu

Question

Ich habe einen Iframe auf einer Seite, der von einer Drittpartei (einer Anzeige) stammt. Ich möchte ein Klickereignis auslösen, wenn dieser Iframe angeklickt wird (um einige interne Statistiken aufzunehmen). Etwas wie:

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

..based auf HTML-Code:

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

Ich kann nicht scheinen, jede Variation dieser Arbeit zu bekommen. Gedanken?

Answer 1

Es gibt kein ‚Onclick‘ Ereignis für ein iframe, aber Sie können versuchen, das Click-Ereignis des Dokuments in der iframe zu fangen:

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

EDIT Obwohl dies nicht dein Kreuz löst Website Problem, FYI wurde jQuery aktualisiert, gut zu spielen mit iFrames:

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

aktualisieren 1/2015 T Der Link zur iframe-Erklärung wurde entfernt, da er nicht mehr verfügbar ist.

Hinweis Der obige Code funktioniert nicht, wenn der Iframe von einer anderen Domäne als der Host-Seite stammt. Sie können immer noch versuchen, die in Kommentaren erwähnten Hacks zu verwenden.

Answer 2

Versuchen Sie, diese mit: iframeTracker jQuery Plugin, wie folgt aus:

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

Answer 3

Keine der vorgeschlagenen Antworten für mich gearbeitet. Ich löste einen ähnlichen Fall die folgende Art und Weise:

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

Die CSS (natürlich exakte Positionierung sollte entsprechend den App-Anforderungen ändern):

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

Natürlich können Sie jetzt jeden Fall fangen auf der Iframe-Wrapper.

Answer 4

Ich habe versucht, eine bessere Antwort zu finden, die mehr Standalone war, also begann ich darüber nachzudenken, wie JQuery Ereignisse und benutzerdefinierte Ereignisse ausführt. Da es sich bei click (aus JQuery) nur um ein Ereignis handelt, dachte ich, dass ich nur das Ereignis auslösen müsste, da der Inhalt des iframes angeklickt wurde. So war meine Lösung

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

Answer 5

für ppl interessant Dies kann unter Verwendung Primefaces (die CLEditor verwendet):

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

ich im Grunde nahm nur die Antwort von Reisen Tech Guy und geändert, um die Auswahl ein wenig ..;)

Answer 6

Sie können diesen Code verwenden, um auf ein Element zu klicken, das sich in iframe befindet.

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

Answer 7

sehen:

var iframe = $('#your_iframe').contents(); 

iframe.find('your_clicable_item').click(function(event){ 
    console.log('work fine'); 
}); 

Answer 8

Lösung, die für mich arbeiten:

var editorInstance = CKEDITOR.instances[this.editorId]; 

      editorInstance.on('focus', function(e) { 

       console.log("tadaaa"); 

      });