Home  > Blog  > JavaScript to Detect Clicks in iFrames

JavaScript to Detect Clicks in iFrames

Dave Smart
Dave Smart
// August 7, 2018
Javascript to Detect Click in iFrame - Tame the Bots

Detecting a Click in an iFrame

Sometimes you need to embed a service in your web pages using an <iframe>, things like ticket sales, events calenders etc. There's many great services you, or your clients might want to offer to their users that work this way

However, if this is a cross domain iframe (embedding a page or resource that loads on a domain not under your control), unless you have the ability to add tracking codes to these pages, you might not know if your visitors are interacting with these services at all.

One solution might be to overlay a heatmap, and track the usage that way, but that can be problematic if the iframe requires scrolling, or resizes between your mobile & desktop users. The benefit is you might have some idea of what they are clicking on in this external site. But if this isn't practical, and you just want to know if someone has clicked in the frame, the following code will do the job.

Example:

Open example in new window

The Code:


  <script>
var iframewatcher = setInterval(function(){
    var activeE = document.activeElement;
    if(activeE && activeE.tagName == 'IFRAME'){
    // Just setting text as example, in this case in a div with the id="alertdiv",  but this could be an ajax call, fire an analytics event, whatever action you need.
    alertdiv.textContent = 'A click happened in the iframe, Party time, excellent!';
        clearInterval(iframewatcher);
    }
}, 100);
</script>

In this example, we use the click detection to simply add some text to a div, but you could just as easily make an ajax call to record the data, or even trigger a google analytics event.

About the Author:

Dave Smart

Dave Smart

Technical SEO Consultant at Tame the Bots.