Detect click event inside iframe

Question

I m writing a plugin for TinyMCE and have a problem with detecting click events inside an iframe    From my search I ve come up with this   Loading iframe    lt iframe src  resource file php mode tinymce  id  filecontainer  gt  lt  iframe gt    HTML inside iframe    lt input type button id choose pics value  Choose  gt    jQuery     Detect click     filecontainer   contents   find   choose pic   click function          do something              Other posts I ve seen usually have a problem with different domains  this hasn t   But  still  the event isn t detected    Can something like this be done

User · Accepted Answer

I solved it by doing like this       filecontainer   load function             var iframe       filecontainer   contents             iframe find   choose pics   click function                   alert  test

User · Answer

Just posting in case it helps someone  For me  the following code worked perfect     document  ready function             payment status div   hide         var iframe       FileFrame   contents         iframe find   take payment   click function                 payment status div   show  slow                   Where  FileFrame  is the iframe id and  take payment  is the button inside iframe  Since my form inside the iframe is posted to a different domain  when used load  I got an error message saying      Blocked a frame with origin  https   www example com  from accessing a frame with origin  https   secure-test worldpay com   Protocols  domains  and ports must match

User · Answer

The tinymce API takes care of many events in the editors iframe  I strongly suggest to use them  Here is an example for the click handler     Adds an observer to the onclick event using tinyMCE init tinyMCE init             setup   function ed          ed onClick add function ed  e               console debug  Iframe clicked     e target

User · Answer

In my case there were two jQuery s  for the inner and outer HTML  I had four steps before I could attach inner events    wait for outer jQuery to be ready  wait for iframe to load  grab inner jQuery wait for inner jQuery to be ready       function          1  wait for the outer jQuery to be ready  aka   document  ready        iframe filecontainer   on  load   function          2  wait for the iframe to load         var  inner      this  0  contentWindow         3  get hold of the inner jQuery          inner  function          4  wait for the inner jQuery to be ready              inner  on  click   function           Now I can intercept inner events                     do something                                           The trick is to use the inner jQuery to attach events  Notice how I m getting the inner jQuery           var  inner      this  0  contentWindow      I had to bust out of jQuery into the object model for it  The    iframe   contents   approach in the other answers didn t work in my case because that stays with the outer jQuery    And by the way returns contentDocument

User · Answer

I know this is old but the ID s don t match in your code one is choose pic and one is choose pics    lt input type button id choose pics value  Choose  gt       filecontainer   contents   find   choose pic   click function          do something

User · Answer

I m not sure  but you may be able to just use      filecontainer  choose pic   click function            do something here       Either that or you could just add a  lt script gt  tag into the iframe  if you have access to the code inside   and then use window parent DoSomething   in the frame  with the code  function DoSomething            do something here     in the parent  If none of those work  try window postMessage  Here is some info on that

User · Answer

If anyone is interested in a  quick reproducible  version of the accepted answer  see below  Credits to a friend who is not on SO  This answer can also be integrated in the accepted answer with an edit      It has to run on a  local  server     lt html gt   lt head gt   lt title gt SO lt  title gt   lt meta charset  utf-8   gt   lt script src  https   ajax googleapis com ajax libs jquery 2 2 4 jquery min js  gt  lt  script gt    lt style type  text css  gt  html  body   filecontainer   width  100   height  100      lt  style gt   lt  head gt   lt body gt   lt iframe src  http   localhost tmp fileWithLink html  id  filecontainer  gt  lt  iframe gt    lt script type  text javascript  gt      filecontainer   load function       var iframe       filecontainer   contents       iframe find  a   click function        var test     this       alert test html                lt  script gt   lt  body gt   lt  html gt    fileWithLink html   lt html gt   lt body gt   lt a href  https   stackoverflow com   gt SOreadytohelp lt  a gt   lt  body gt   lt  html gt

User · Answer

In my case  I was trying to fire a custom event from the parent document  and receive it in the child iframe  so I had to do the following   var event   new CustomEvent  marker-metrics         detail     extra payload data here     var iframe   document getElementsByTagName  iframe    iframe 0  contentDocument dispatchEvent event    and in the iframe document   document addEventListener  marker-metrics    e    gt      console log          e detail

User · Answer

iframe-id   load  function             iframe-id   contents   on  click     child-node   function               do something

[javascript] Detect click event inside iframe

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to iframe

Examples related to tinymce