Detect IFRAME click from parent page

By , December 22, 2015 3:04 pm

If you need to detect a click on a Web Page, that’s trivial: just catch Document or Body onclick event and any element on the page you click will bubble the event to your handler.

But if one of those elements is an IFRAME – that won’t work. IFRAMEs contain other pages and their events a contained within their content and don’t bubble up. Luckily there’s a way. Take a look this snippet of jQuery code:

$('IFRAME').on('load', function () {
   $(this).contents().on('click', function () {
      alert('Click Detected!');

It attaches handler to IFRAME’s content’s onclick event, but only after IFRAME has already been loaded. Place this code in parent page that contains IFRAMEs and it will work universally across all browsers to detect when IFRAME was clicked.

NOTE: As usual in these scenarios, this works only if parent page and children pages comply with Same Origin Policy.

2 Responses to “Detect IFRAME click from parent page”

  1. JYOTHI says:

    HI This is Jyothi,

    in my website the main content was placed in iframe. so everything will work in iframe only,

    first it will go to home.html then the next page is iframes pages.

    cabintepage is main iframe. if any mouse moments are happening in cabinet page. i want to detect from home.html page.

    By placing your code it is not working.

    I am going to implement add timeout warning when the user is in idle.

    so i have implemented that if home.html.
    but when user is perfomring anything in cabinetpage. It is not detecting could you please help me from this.

  2. Yuriy says:

    @JYOTHI you can do this by calling function on parent of the iframe. For example in your iframe document do:

    document.addEventListener('mousemove', parent.catch_mouse, false);

    and in your home.html:

    function catch_mouse() {
    // handle mouse move here

Leave a Reply

Panorama Theme by Themocracy