catch click position in iframe cross-domain

Question

I have faced problem with tracking click position, when it is over iframe which is cross-domain.

My code is right now:

<div class="poin">
<iframe width="640" height="360" src="http://cross_domain" frameborder="0" allowfullscreen id="video"></iframe>
</div>

and JS:

$('.poin').bind("mousemove", function(e) {
console.log("x:" + e.pageX + ", y:" + e.pageY);
});

This one code, doesn't show anything when moving over iframe window, but when moving on window showing everything.

And as well I tried on mousedown and mouseup on iframe

onmousedown="$(this).addClass(point)" onmouseup="$(this).removeClass(point)"
.point{
pointer-events:none;
}

but pointer-events:none disallows click, so moving over iframe works, but when user clicking nothing happens.

Maybe you have some ideas how to do such thing to track mouse click on iframe window?

Answer 1

I have a feeling that this will be part of the security model intended to you from messing with other peoples website. If you don't have any control over the pages on a different domain then your javascript options are typically zero I'm afraid. (if you can control the other domain have a script on that page report back to the parent framing page)

You could try laying a transparent element over the top of the iframe an detecting the movement on that. Of course that will prevent the use interacting with the framed page as well, but if you could instruct the user to double click and then you could remove the transparent element on the first click allowing the second to hit the framed page.

Unfortunately this is something you are not supposed to do cross-domain.