Entry
How do I detect a click on an IFRAME if the IFRAME source comes from a foreign domain?
Jan 30th, 2004 11:15
Marfan, Stephanie Leung,
Here is a workaround:
Track the mouse cursor on the screen. When the window loses focus,
check to see if the mouse's last position was near the IFRAME. It
is not 100% accurate, but will detect most banner clicks.
Notes:
1. The blue area around the IFRAME is the detection area.
2. Clicking this area will sometimes count as a banner click, but since
nothing is there, not many people will click it. IE bug?
3. Holding the mouse over the banner and alt-tabbing will also count as
a click. This isn't very likely either.
4. Right-clicking the banner counts as a click, even if the link isn't
followed.
5. If the user moves his mouse too fast, the cursor will not enter the
detection area (and not be detected).
6. The form output is optional. It is only there so you can see what
is goin on.
7. Replace the ####### with your iframe url.
8. IFRAME only works in IE, so there is no netscape version of the
script.
Enjoy!
</// start example ///>
<html><head></head><body>
<br><br><br>
<table cellspacing=0 cellpadding=0><tr><td width=200></td><td
bgcolor=blue>
<iframe src="#######" width=300 height=50 scrolling=no vspace=15
hspace=15></iframe>
</td></tr></table>
<center>
<br><br><br><br><br><br><br><br><br><br>
<form name=f>
X<input name=x size=5><br>
Y<input name=y size=5><br>
In Iframe?<input name=i size=5><br>
Clicked Banner?<input name=cl size=5><br>
</form>
</center>
<script>
//remote iframe click detector
//by Marfan (onlywhenitscold@doglover.com)
//1-30-04
d=document;
function Point(x,y){
this.x=x;
this.y=y;
}
function Rect(x1,y1,x2,y2){
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
this.Contains=Contains;
function Contains(p){
with(this) return (x1<p.x && x2>p.x && y1<p.y && y2>p.y);
}
}
mouse = new Point(0,0);
iframe = new Rect (212,75,541,153);
function getMouseXY() {
mouse.x = event.clientX + d.body.scrollLeft;
mouse.y = event.clientY + d.body.scrollTop;
//update form
d.f.x.value = mouse.x;
d.f.y.value = mouse.y;
d.f.i.value = (iframe.Contains(mouse))?"Yes":"No";
}
function checkClick() {
d.f.cl.value = (iframe.Contains(mouse))?"Yes":"No";
}
function checkClick() {
d.f.cl.value = (iframe.Contains(mouse))?"Yes":"No";
}
function clearClick() {
d.f.cl.value = "No";
}
d.onmousemove = getMouseXY;
window.onblur = checkClick;
d.onclick = clearClick;
</script>
</body></html>
</// end example ///>
