在 iframe 跨域中捕获点击位置

Posted 2023-05-09

【中文标题】在 iframe 跨域中捕获点击位置

【英文标题】：catch click position in iframe cross-domain

【发布时间】：2015-06-20 19:31:54

【问题描述】：

当点击位置超过跨域的 iframe 时，我遇到了跟​​踪点击位置的问题。

我的代码现在是：

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

和 JS：

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

这段代码在 iframe 窗口上移动时不显示任何内容，但在显示所有内容的窗口上移动时。

我还尝试了 iframe 上的 mousedown 和 mouseup

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

但是 pointer-events:none 不允许点击，所以在 iframe 上移动是可行的，但是当用户点击时没有任何反应。

也许你有一些想法如何做这样的事情来跟踪鼠标在 iframe 窗口上的点击？

【问题讨论】：

出于安全原因，您不能对跨域页面执行此操作！

【参考方案1】：

我有一种感觉，这将成为安全模型的一部分，旨在让您避免与其他人的网站混淆。如果您对不同域上的页面没有任何控制权，那么恐怕您的 javascript 选项通常为零。 （如果您可以控制其他域，则该页面上有一个脚本报告回父框架页面）

您可以尝试在 iframe 顶部放置一个透明元素并检测其上的移动。当然，这也会阻止用户与框架页面进行交互，但是如果您可以指示用户双击，然后您可以在第一次单击时移除透明元素，从而允许第二次单击框架页面。

很遗憾，这是你不应该跨域做的事情。