How to add click event to a iframe with JQuery

Question

I have an iframe on a page  coming from a 3rd party  an ad   I d like to fire a click event when that iframe is clicked in  to record some in-house stats   Something like       iframe id   click function           run function that records clicks         based on HTML of    lt iframe id  iframe id  src  http   something com  gt  lt  iframe gt    I can t seem to get any variation of this to work  Thoughts

User · Answer

None of the suggested answers worked for me. I solved a similar case the following way:

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

The css (of course exact positioning should change according to the app requirements):

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

Of course now you can catch any event on the iframe-wrapper.

User · Answer

Solution that work for me    var editorInstance   CKEDITOR instances this editorId                editorInstance on  focus   function e                     console log  tadaaa

User · Answer

You can use this code to bind click an element which is in iframe    x000D   x000D  jQuery   class in iframe  jQuery   id  id of iframe     0  contentWindow document body  on  click  function     x000D   console log  triggered      x000D      x000D   x000D   x000D

User · Answer

I was trying to find a better answer that was more standalone  so I started to think about how JQuery does events and custom events   Since click  from JQuery  is just any event  I thought that all I had to do was trigger the event given that the iframe s content has been clicked on   Thus  this was my 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 trigger  click                                         iframe click function                    Handle what you need it to do

User · Answer

This may be interesting for ppl using Primefaces  which uses CLEditor     document getElementById  form somecontainer editor    getElementsByTagName  iframe   0  contentWindow  document onclick   function     do something    I basically just took the answer from Travelling Tech Guy and changed the selection a bit

User · Answer

You could simulate a focus click event by having something like the following   adapted from   window  blur event affecting Iframe    x000D   x000D    window  blur function      x000D       check focus x000D    if     iframe   is   focus      x000D      console log  iframe focused    x000D        document activeElement  trigger  focus      Could trigger click event instead x000D      x000D    else   x000D      console log  iframe unfocused    x000D                      x000D      x000D   x000D    Test x000D      iframe id   on  focus   function e   x000D    console log e   x000D    console log  hello im focused    x000D     x000D   x000D   x000D

User · Answer

You can solve it very easily  just wrap that iframe in wrapper  and track clicks on it   Like this    lt div id  iframe id wrapper  gt     lt iframe id  iframe id  src  http   something com  gt  lt  iframe gt   lt  div gt    And disable pointer events on iframe itself    iframe id   pointer-events  none     After this changes your code will work like expected       iframe id wrapper   click function           run function that records clicks

User · Answer

There s no  onclick  event for an iframe  but you can try to catch the click event of the document in the iframe   document getElementById  iframe id   contentWindow document body onclick    function       alert  iframe clicked        EDIT Though this doesn t solve your cross site problem  FYI jQuery has been updated to play well with iFrames       iframe id   on  click   function event          Update 1 2015 The link to the iframe explanation has been removed as it s no longer available   Note The code above will not work if the iframe is from different domain than the host page  You can still try to use hacks mentioned in comments

User · Answer

It works only if the frame contains page from the same domain  does   not violate same-origin policy    See this   var iframe       your iframe   contents     iframe find  your clicable item   click function event      console log  work fine

User · Answer

Try using this   iframeTracker jQuery Plugin  like that    jQuery document  ready function             iframe wrap iframe   iframeTracker           blurCallback  function                   Do something when iframe is clicked  like firing an XHR request

[jquery] How to add click event to a iframe with JQuery

Examples related to jquery

Examples related to iframe

Examples related to onclick