Detect Click into Iframe using JavaScript

Question

I understand that it is not possible to tell what the user is doing inside an iframe if it is cross domain   What I would like to do is track if the user clicked at all in the iframe   I imagine a scenario where there is an invisible div on top of the iframe and the the div will just then pass the click event to the iframe     Is something like this possible   If it is  then how would I go about it   The iframes are ads  so I have no control over the tags that are used

User · Answer

This works for me on all browsers  included Firefox   https   gist github com jaydson 1780598  https   jsfiddle net sidanmor v6m9exsw    x000D   x000D  var myConfObj     x000D    iframeMouseOver   false x000D    x000D  window addEventListener  blur  function    x000D    if myConfObj iframeMouseOver   x000D      console log  Wow  Iframe Click     x000D      x000D      x000D   x000D  document getElementById  idanmorblog   addEventListener  mouseover  function    x000D     myConfObj iframeMouseOver   true  x000D      x000D  document getElementById  idanmorblog   addEventListener  mouseout  function    x000D      myConfObj iframeMouseOver   false  x000D      x000D   lt iframe id  idanmorblog  src  https   sidanmor com   style  width 400px height 600px   gt  lt  iframe gt  x000D   x000D   x000D     lt iframe id  idanmorblog  src  https   sidanmor com   style  width 400px height 600px   gt  lt  iframe gt

User · Answer

Based on Mohammed Radwan s answer I came up with the following jQuery solution  Basically what it does is keep track of what iFrame people are hovering  Then if the window blurs that most likely means the user clicked the iframe banner   the iframe should be put in a div with an id  to make sure you know which iframe the user clicked on    lt div class  banner  bannerid  yyy  gt       lt iframe src  http   somedomain com whatever html  gt  lt  iframe gt   lt div gt    so     document  ready  function         var overiFrame   -1         iframe   hover  function             overiFrame     this  closest   banner   attr  bannerid           function             overiFrame   -1               this keeps overiFrame at -1 when no iFrames are hovered  or the  bannerid  set in the wrapping div when an iframe is hovered  All you have to do is check if  overiFrame  is set when the window blurs  like so             window  blur  function             if  overiFrame    -1                 post  log php    id overiFrame       example  do your stats here                  Very elegant solution with a minor downside  if a user presses ALT-F4 when hovering the mouse over an iFrame it will log it as a click  This only happened in FireFox though  IE  Chrome and Safari didn t register it    Thanks again Mohammed  very useful solution

User · Answer

The following code will show you if the user click hover or move out of the iframe -   lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN  gt   lt html gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset ISO-8859-1  gt   lt title gt Detect IFrame Clicks lt  title gt   lt script type  text javascript  gt        document  ready function             var isOverIFrame   false           function processMouseOut                 log  IFrame mouse  gt  gt  OUT  lt  lt  detected                 isOverIFrame   false              top focus                       function processMouseOver                 log  IFrame mouse  gt  gt  OVER  lt  lt  detected                 isOverIFrame   true                     function processIFrameClick                 if isOverIFrame                       replace with your function                 log  IFrame  gt  gt  CLICK  lt  lt  detected                                       function log message                var console   document getElementById  console                var text   console value              text   text   message     n               console value   text                     function attachOnloadEvent func  obj                if typeof window addEventListener     undefined                     window addEventListener  load   func  false                 else if  typeof document addEventListener     undefined                     document addEventListener  load   func  false                 else if  typeof window attachEvent     undefined                     window attachEvent  onload   func                 else                   if  typeof window onload     function                         var oldonload   onload                      window onload   function                             oldonload                            func                                             else                       window onload   func                                                     function init                 var element   document getElementsByTagName  iframe                for  var i 0  i lt element length  i                      element i  onmouseover   processMouseOver                  element i  onmouseout   processMouseOut                            if  typeof window attachEvent     undefined                     top attachEvent  onblur   processIFrameClick                             else if  typeof window addEventListener     undefined                     top addEventListener  blur   processIFrameClick  false                                    attachOnloadEvent init            lt  script gt   lt  head gt   lt body gt   lt iframe src  www google com  width  100   height  1300px  gt  lt  iframe gt   lt br gt  lt  br gt   lt br gt  lt  br gt   lt form name  form  id  form  action    gt  lt textarea name  console  id  console  style  width  100   height  300px   cols    rows    gt  lt  textarea gt   lt button name  clear  id  clear  type  reset  gt Clear lt  button gt   lt  form gt   lt  body gt   lt  html gt    You need to replace the src in the iframe with your own link  Hope this ll help  Regards  Mo

User · Answer

As found there   Detect Click into Iframe using JavaScript     We can use iframeTracker-jquery        carousel-inner  item   each function e        var item   this      var iFrame     item  find  iframe        if  iFrame length  gt  0            iFrame iframeTracker               blurCallback  function                       Do something when iFrame is clicked  like firing an XHR request                  onItemClick bind item        calling regular click with right context                 console log  IFrameClick   gt  OK                                      console log  IFrameTrackingRegistred   gt  OK

User · Answer

This definitely works if the iframe is from the same domain as your parent site  I have not tested it for cross-domain sites     window frames  YouriFrameId    click function event       do something here           window frames  YouriFrameId    mousedown function event      do something here          window frames  YouriFrameId    mouseup function event      do something here          Without jQuery you could try something like this  but again I have not tried this   window frames  YouriFrameId   onmousedown   function     do something here     You can even filter your results     window frames  YouriFrameId    mousedown function event        var eventId     event target  attr  id            if  eventId     the-id-you-want            do something

User · Answer

I believe you can do something like      iframe   contents   click function   function to record click here       using jQuery to accomplish this

User · Answer

You can achieve this by using the blur event on window element   Here is a jQuery plugin for tracking click on iframes  it will fire a custom callback function when an iframe is clicked    https   github com finalclap iframeTracker-jquery  Use it like this    jQuery document  ready function             iframe wrap iframe   iframeTracker           blurCallback  function                   Do something when iframe is clicked  like firing an XHR request

User · Answer

Here is solution using suggested approaches with hover blur and active element tricks  not any libraries  just pure js  Works fine for FF Chrome  Mostly approache is same as  Mohammed Radwan proposed  except that I use different method proposed by  zone117x to  track iframe click for FF  because window focus is not working without addition user settings      Makes a request to bring the window to the front  It may fail due to   user settings and the window isn t guaranteed to be frontmost before   this method returns    Here is compound method   function          const state             function  setup            if  typeof window addEventListener      undefined                 window addEventListener  load   setup  false             else if  typeof document addEventListener      undefined                 document addEventListener  load   setup  false             else if  typeof window attachEvent      undefined                 window attachEvent  onload   setup             else               if  typeof window onload      function                     const oldonload   onload                  window onload   function                          oldonload                        setup                                     else                   window onload   setup                                 function              state isOverIFrame   false          state firstBlur   false          state hasFocusAcquired   false           findIFramesAndBindListeners             document body addEventListener  click   onClick            if  typeof window attachEvent      undefined                 top attachEvent  onblur   function                      state firstBlur   true                  state hasFocusAcquired   false                  onIFrameClick                               top attachEvent  onfocus   function                      state hasFocusAcquired   true                  console log  attachEvent focus                              else if  typeof window addEventListener      undefined                 top addEventListener  blur   function                      state firstBlur   true                  state hasFocusAcquired   false                  onIFrameClick                   false               top addEventListener  focus   function                      state hasFocusAcquired   true                  console log  addEventListener focus                                       setInterval findIFramesAndBindListeners  500                function isFF             return navigator userAgent search  firefox i      -1             function isActiveElementChanged             const prevActiveTag   document activeElement tagName toUpperCase            document activeElement blur            const currActiveTag   document activeElement tagName toUpperCase            return  prevActiveTag includes  BODY    amp  amp  currActiveTag includes  BODY               function onMouseOut             if   state firstBlur  amp  amp  isFF    amp  amp  isActiveElementChanged                  console log  firefox first click                onClick              else               document activeElement blur                top focus                      state isOverIFrame   false          console log  onMouseOut               function onMouseOver             state isOverIFrame   true          console log  onMouseOver               function onIFrameClick             console log  onIFrameClick            if  state isOverIFrame                onClick                         function onClick             console log  onClick               function findIFramesAndBindListeners             return Array from document getElementsByTagName  iframe                 forEach function  element                    element onmouseover   onMouseOver                  element onmouseout   onMouseOut

User · Answer

Mohammed Radwan  Your solution is elegant  To detect iframe clicks in Firefox and IE  you can use a simple method with document activeElement and a timer  however    I have searched all over the interwebs for a method to detect clicks on an iframe in Chrome and Safari  At the brink of giving up  I find your answer  Thank you  sir   Some tips  I have found your solution to be more reliable when calling the init   function directly  rather than through attachOnloadEvent    Of course to do that  you must call init   only after the iframe html  So it would look something like    lt script gt  var isOverIFrame   false  function processMouseOut         isOverIFrame   false      top focus      function processMouseOver     isOverIFrame   true    function processIFrameClick         if isOverIFrame          was clicked          function init         var element   document getElementsByTagName  iframe        for  var i 0  i lt element length  i              element i  onmouseover   processMouseOver          element i  onmouseout   processMouseOut            if  typeof window attachEvent     undefined             top attachEvent  onblur   processIFrameClick             else if  typeof window addEventListener     undefined             top addEventListener  blur   processIFrameClick  false            lt  script gt    lt iframe src  http   google com  gt  lt  iframe gt    lt script gt init    lt  script gt

User · Answer

This is certainly possible  This works in Chrome  Firefox  and IE 11  and probably others    focus    var listener   window addEventListener  blur   function         if  document activeElement     document getElementById  iframe                 clicked           window removeEventListener  blur   listener         JSFiddle    Caveat  This only detects the first click  As I understand  that is all you want

User · Answer

We can catch all the clicks  The idea is to reset focus on an element outside the iFrame after each click        lt input type  text  style  position fixed top -1000px left -1000px  gt       lt div id  message  gt  lt  div gt       lt iframe id  iframe  src    example com  gt  lt  iframe gt       lt script gt          focus            addEventListener  blur   function                 if document activeElement   document getElementById  iframe                      message innerHTML     Clicked                   setTimeout function                          document querySelector  input   focus                        message innerHTML      - Reset focus                       1000                                    lt  script gt    JSFiddle

User · Answer

Is something like this possible    No  All you can do is detect the mouse going into the iframe  and potentially  though not reliably  when it comes back out  ie  trying to work out the difference between the pointer passing over the ad on its way somewhere else versus lingering on the ad       I imagine a scenario where there is an invisible div on top of the iframe and the the div will just then pass the click event to the iframe    Nope  there is no way to fake a click event   By catching the mousedown you d prevent the original click from getting to the iframe  If you could determine when the mouse button was about to be pressed you could try to get the invisible div out of the way so that the click would go through    but there is also no event that fires just before a mousedown   You could try to guess  for example by looking to see if the pointer has come to rest  guessing a click might be about to come  But it s totally unreliable  and if you fail you ve just lost yourself a click-through

User · Answer

This is small solution that works in all browsers even IE8   var monitor   setInterval function        var elem   document activeElement      if elem  amp  amp  elem tagName     IFRAME            clearInterval monitor           alert  clicked              100     You can test it here  http   jsfiddle net oqjgzsm0

User · Answer

You can do this to bubble events to parent document      iframe   load function         var eventlist    click dblclick                       blur focus focusin focusout                       keydown keypress keyup                       mousedown mouseenter mouseleave mousemove mouseover mouseout mouseup mousemove                       touchstart touchend touchcancel touchleave touchmove        var iframe      iframe   contents   find  html            Bubble events to parent     iframe on eventlist  function event               html   trigger event                 Just extend the eventlist for more events

User · Answer

see http   jsfiddle net Lcy797h2  for my long winded solution that doesn t work reliably in IE            window  on  blur  function e                    if   this  data  mouseIn       yes  return                 iframe   filter function                    return   this  data  mouseIn       yes                  trigger  iframeclick                               window  mouseenter function                  this  data  mouseIn    yes               mouseleave function                  this  data  mouseIn    no                            iframe   mouseenter function                  this  data  mouseIn    yes                  window  data  mouseIn    yes               mouseleave function                  this  data  mouseIn   null                           iframe   on  iframeclick   function                console log  Clicked inside iframe                    result   text  Clicked inside iframe                           window  on  click   function                console log  Clicked inside window                    result   text  Clicked inside window                blur function                console log  window blur                             lt input type  text  style  position absolute opacity 0 height 0px width 0px    gt    appendTo document body  blur function                      window  trigger  blur                   focus

User · Answer

Just found this solution    I tried it  I loved it    Works for cross domain iframes for desktop and mobile   Don t know if it is foolproof yet  window addEventListener  blur  function          if document activeElement id     CrossDomainiframeId              do something  -                Happy coding

User · Answer

Assumptions -  Your script runs outside the iframe BUT NOT in the outermost window top window   For outermost window  other blur solutions are good enough  A new page is opened replacing the current page   a new page in a new tab and control is switched to new tab   This works for both sourceful and sourceless iframes var ifr   document getElementById  quot my-iframe quot    var isMouseIn  ifr addEventListener  mouseenter        gt        isMouseIn   true      ifr addEventListener  mouseleave        gt        isMouseIn   false      window document addEventListener  quot visibilitychange quot        gt        if  isMouseIn  amp  amp  document hidden            console log  quot Click Recorded By Visibility Change quot              window addEventListener  quot beforeunload quot    event    gt        if  isMouseIn            console log  quot Click Recorded By Before Unload quot               If a new tab is opened   same page unloads and the mouse pointer is within the Iframe  a click is considered

User · Answer

http   jsfiddle net QcAee 406    Just make a invisible layer over the iframe that go back when click and go up when mouseleave event will be fired    Need jQuery  this solution don t propagate first click inside iframe    x000D   x000D      invisible layer   on  click  function    x000D    alert  click    x000D        invisible layer   css  z-index  -11   x000D   x000D      x000D     iframe   on  mouseleave  function    x000D        invisible layer   css  z-index  11   x000D      x000D  iframe   x000D      width  500px  x000D      height  300px  x000D    x000D   invisible layer  x000D    position  absolute  x000D    background-color trasparent  x000D    width  500px  x000D    height 300px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  message  gt  lt  div gt  x000D   lt div id  invisible layer  gt  x000D   x000D   lt  div gt  x000D   lt iframe id  iframe  src    example com  gt  lt  iframe gt  x000D   x000D   x000D

User · Answer

I ran into a situation where I had to track clicks on a social media button pulled in through an iframe  A new window would be opened when the button was clicked  Here was my solution   var iframeClick   function          var isOverIframe   false      windowLostBlur   function              if  isOverIframe     true                   DO STUFF             isOverIframe   false                       jQuery window  focus        jQuery   iframe   mouseenter function            isOverIframe   true          console log isOverIframe               jQuery   iframe   mouseleave function            isOverIframe   false          console log isOverIframe               jQuery window  blur function              windowLostBlur               iframeClick

User · Answer

Combining above answer with ability to click again and again without clicking outside iframe       var eventListener   window addEventListener  blur   function         if  document activeElement     document getElementById  contentIFrame              toFunction      function you want to call on click         setTimeout function    window focus       0             window removeEventListener  blur   eventListener

User · Answer

Based in the answer of Paul Draper  I created a solution that work continuously when you have Iframes that open other tab in the browser  When you return the page continue to be active to detect the click over the framework  this is a very common situation             focus              window  blur      gt               let frame   document activeElement             if  document activeElement tagName     IFRAME                     Do you action   here  frame has the iframe clicked               let frameid   frame getAttribute  id                 let frameurl    frame getAttribute  src                                                   document addEventListener  visibilitychange   function                  if  document hidden                   else                   focus                                The Code is simple  the blur event detect the lost of focus when the iframe is clicked  and test if the active element is the iframe  if you have several iframe you can know who was selected  this situation is frequently when you have publicity frames   The second event trigger a focus method when you return to the page  it is used the visibility change event

[javascript] Detect Click into Iframe using JavaScript

Examples related to javascript

Examples related to iframe

Examples related to ads

Examples related to dom-events

Examples related to click-tracking