Skip to content

Instantly share code, notes, and snippets.

@jaydson
Created February 9, 2012 15:11
Show Gist options
  • Save jaydson/1780598 to your computer and use it in GitHub Desktop.
Save jaydson/1780598 to your computer and use it in GitHub Desktop.
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;
});
@ssoulless
Copy link

Could somebody provide an example to add mobile support?

@ssoulless
Copy link

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

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

@lewisMachilika
Copy link

This is so great. Thank you a lot.

@qiutian00
Copy link

so awsome !

@azharr-ansariii
Copy link

did anyone done it with mobile Device???

@dkornilove
Copy link

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);
});

@gentle-media
Copy link

gentle-media commented Mar 23, 2023

As far as I can test this seems to work in Chrome and Firefox, but not in Safari. Anyone else got a workaround to get this working in Safari?

Also I would like to mention that if you add window.focus(); the user then don't have to click outside the iFrame themselves before it can register again a 'click' on the iFrame.

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

@gentle-media
Copy link

As far as I can test this seems to work in Chrome and Firefox, but not in Safari. Anyone else got a workaround to get this working in Safari?

Correction! It does work in (desktop) Safari. I needed to clear the browser history and after that my 'HTML/CSS/JS iframe click wizardry' did what it was supposed to do.

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