Created
February 9, 2012 15:11
-
Star
(169)
You must be signed in to star a gist -
Fork
(27)
You must be signed in to fork a gist
-
-
Save jaydson/1780598 to your computer and use it in GitHub Desktop.
How to detect a click event on a cross domain iframe
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
}); |
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);
});
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);
});
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
did anyone done it with mobile Device???