Twitter
BrazilJS
Capitalistas de Merda
Situação um pouco estranha não?
Mas é isso mesmo.
Nunca tinha me deparado com tal “problema”:
Como saber que o evento Click foi disparado dentro de um iframe crossdomain?
Bom, não existe uma maneira natural de fazer isso.
O que acontece é que o evento click até acontece no iframe, mas somente no elemento em si.
Isso quer dizer que, quando o click acontece em um elemento que esta no documento do escopo do iframe, somente este iframe sabe disso.
Como fazer então?
Eu não tinha ideia, e aqui vale muito lembrar uma frase que ouvi em um evento certa vez:
“Nunca acredite em especialistas!”
No caso, o especialista sou eu, que não tinha até então uma maneira simples de resolver o problema.
Um amigo/colega aqui do Terra(André Marquardt), que possui TB’s de experiência, mas não em JavaScript, me sugeriu algo.
Depois de matutar sobre a ideia, cheguei a conclusão de que “PQP! Talvez funcione!”.
Solução
A solução é bem simples:
- Crie um placeholder em volta do iframe(iframe dentro de um DIV, por exemplo)
- Adicione ao evento de mouseover deste elemento uma função que altere o valor de uma variável, informando que o mouse está ali
- Adicione ao evento de mouseout deste elemento uma função que altere o valor da mesma variável, informando que o mouse saiu dali
- Adicione ao evento blur do “body” uma função que verifica o valor da variável, e assuma que isso foi o click no iframe ;)
Porquê isso funciona?
Quando clicamos em um iframe, estamos selecionando o elemento “iframe” e neste caso, o evento “blur” do body vai ser disparado.
Obviamente, esta solução possui algumas limitações:
- Somente 1 “click” será disparado no iframe. Isso porque quando estamos dentro do iframe, não temos mais o blur do body.
PS: Tentei usar o focus() em algum elemento da página pai, mas sem sucesso.
- Qualquer pixel do iframe que for clicado, o blur do body será disparado, ou seja, talvez o click não seja exatamente onde queremos medir.
Abaixo um código sample da solução:
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;
});