Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to detect a click event on a cross domain iframe
var myConfObj = {
iframeMouseOver : false
}
window.addEventListener('blur',function(){
if(myConfObj.iframeMouseOver){
console.log('Wow! Iframe Click!');
}
});
document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseover',function(){
myConfObj.iframeMouseOver = true;
});
document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseout',function(){
myConfObj.iframeMouseOver = false;
});
@alucidwolf
Copy link

alucidwolf commented Sep 20, 2016

Very useful. I am looking for a way to access a button inside the iFrame and trigger a click event when that button is clicked inside the iFrame that is on another domain.

This works great to trigger an event if the iFrame wrapper is clicked, but trying to go deeper into an element within the iFrame has proven difficult. Has anyone had success taking it this far?

Cheers!

@ankushchauhan9
Copy link

ankushchauhan9 commented Jul 26, 2017

thanx!!

@Toniiiio
Copy link

Toniiiio commented Sep 4, 2017

@AlexandraKlein:
Just initialize iframeMouseOver as true?

@micdenny
Copy link

micdenny commented Jan 23, 2018

I did a simple angular wrapper based on these suggestions: https://gist.github.com/micdenny/db03a814eaf4cd8abf95f77885d9316f so you can do this:

<div>
  <iframe appIframeTracker (iframeClick)="onIframeClick()" src="http://www.google.com"></iframe>
</div>

@maxyharr
Copy link

maxyharr commented Jan 25, 2018

Thanks for the solutions, but are there any that provide mobile support?

@chaitanya1248
Copy link

chaitanya1248 commented Jan 29, 2018

@maxyharr - Use touch events in case of mobile. touchstart, touchend.

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

@manjeetglv
Copy link

manjeetglv commented Mar 27, 2018

@alucidwolf did you find any solution?

@Pretorians
Copy link

Pretorians commented Apr 2, 2018

Hi,
Solve the problem in this way for mobile and desktop.

$(document).ready(function()
 {
	window.addEventListener('blur',function(){		
	    if (document.activeElement instanceof HTMLIFrameElement) {
                //Click in Iframe.
	    	tagueoFocusForm("campo captcha no robot");
	    }
	});	
});

@gsumit1
Copy link

gsumit1 commented May 30, 2018

window.addEventListener('blur',function(){
if (document.activeElement instanceof HTMLIFrameElement)
some code}

This content.js code is not working for firefox though it is working for chrome. The web page is consisted of multiple iframes. Any suggestion.

@dawaltconley
Copy link

dawaltconley commented Jun 4, 2018

For me, adding a 0 second timeout to @Pretorians suggestion made it work in Firefox. The problem seems to be that, at the time Firefox fires the blur event, it has not yet updated the document.activeElement, so it evaluates to false.

	window.addEventListener('blur',function(){	
            window.setTimeout(function () {	
	        if (document.activeElement instanceof HTMLIFrameElement) {
	    	    console.log("iframe click");
	        }
             }, 0);
	});

@MichVollmer
Copy link

MichVollmer commented Jun 6, 2018

As alucidwolf, I am looking for a way to access a button inside the iFrame and trigger a click event when that button is clicked inside the iFrame that is on another domain.

Has anyone had success taking it this far?

Michael

@bees4ever
Copy link

bees4ever commented Jun 29, 2018

Wow nice trick 👍

@sleshJdev
Copy link

sleshJdev commented Oct 2, 2018

This solution is not working for FF v62, because when you click on iframe and redirecting to a new window/tab, blur event in not thrown. Unfortunately I didn't fund any workaround yet.

@sleshJdev
Copy link

sleshJdev commented Oct 4, 2018

Here is how I track iframe click for FF/Chrome:

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') && currActiveTag.includes('BODY');
    }

    function onMouseOut() {
        if (!state.firstBlur && isFF() && 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;
            });
    }
}

@aiglevn
Copy link

aiglevn commented Oct 19, 2018

Very Useful! Thanks!

@gwhitelaw
Copy link

gwhitelaw commented Nov 28, 2018

Nice one @dawaltconley

@jtabone16
Copy link

jtabone16 commented Nov 30, 2018

Perfect!

@Taimoor-Tariq
Copy link

Taimoor-Tariq commented Dec 4, 2018

What if I have 4 iframes. I cant figure out how to separate them, when I click on one of them the function executes for all of them. My function is it zooms in the iframe when clicked but when i click 1 all of them get zoomed

@doughballs
Copy link

doughballs commented Feb 27, 2019

ANN0Y1NGHACKER, here's how I targeted a specific iframe for a google captcha:

var frames = Array.from(document.getElementsByTagName('iframe'));
var recaptchaWindow;

frames.forEach(function(x){
if (x.src.includes('google.com/recaptcha/api2/bframe') ){
recaptchaWindow = x.parentNode.parentNode;
};
});

@nahidhasankakon
Copy link

nahidhasankakon commented Mar 1, 2019

How to disable right click on iframe content.I have tried long time but can't solve it yet. I need this solution badly.Do u have any idea?

@kivervinicius
Copy link

kivervinicius commented Jul 15, 2019

JQuery version

        var iframeMouseOver = false;
	$("YOUR_CONTAINER_ID")
		.off("mouseover.iframe").on("mouseover.iframe", function() {
			iframeMouseOver = true;
		})
		.off("mouseout.iframe").on("mouseout.iframe", function() {
			iframeMouseOver = false;
		});

	$(window).off("blur.iframe").on("blur.iframe", function() {
		if(iframeMouseOver){
			$j("#os_top").click();
		}
	});

@yaquawa
Copy link

yaquawa commented Aug 9, 2019

Thanks! I created a script to simulate click event propagation of iframe.🥳

propagate_iframe_click_event.js

@ssoulless
Copy link

ssoulless commented Nov 4, 2019

Could somebody provide an example to add mobile support?

@ssoulless
Copy link

ssoulless commented Nov 9, 2019

I just created a bounty on StackOverflow for the one who tell me how to add mobile support to this code

@gusdewa
Copy link

gusdewa commented Jun 25, 2020

Thanks for this.

When we have cross-domain iframe, this will stop triggering the click on the iframe it self.
Any idea how to trigger both the parent blur event and the iframe click event?

@azu-kodix
Copy link

azu-kodix commented Sep 9, 2020

If page has multiple iframes then event will only fire the first time, unless you return focus to the page. Hmm..

@lewisMachilika
Copy link

lewisMachilika commented Mar 16, 2021

This is so great. Thank you a lot.

@qiutian00
Copy link

qiutian00 commented May 18, 2021

so awsome !

@azharr-ansariii
Copy link

azharr-ansariii commented Jul 23, 2021

did anyone done it with mobile Device???

@dkornilove
Copy link

dkornilove commented Jul 28, 2021

did anyone done it with mobile Device???

also working in FireFox. thanks to @dawaltconley

window.addEventListener('blur', function () {
                window.setTimeout(function () {
                    if (document.activeElement == document.querySelector('your_iframe_selector')) {
                        //handle click
                    }
                }, 0);
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment