检测透明 iframe 后面的鼠标事件

Question

我正在构建一个 Chrome 扩展，当它处于活动状态时，会将 iframe 附加到页面主体，并设置为固定位置以占据整个窗口尺寸（0, 0 100vw, 100vh）。

iframe 本身是透明的，但有一些绝对控件，这些控件占用的空间很小，并且使网站的大部分主体可见，其中一些控件还可以拖动，因此我们可以移动它们以显示它们覆盖的网站部分。

我需要网站本身保持交互性，我的意思是，响应点击、鼠标悬停等，在 iftame 透明的所有区域。

欢迎任何有效的建议。

Answer 1

他们不是一个简单的方法来做到这一点，你最好的选择是搜索 iframe 后面页面上的每个可点击的东西，使用

getBoundingClientRect()

来获取它覆盖的区域并创建页面上所有位置的数组。

然后您可以获取 iframe 中单击的区域，并使用数组找到并单击后面的项目。