如何在 iframe 上方添加透明层？答案

【问题标题】：How to add a transparent layer above an iframe?如何在 iframe 上方添加透明层？
【发布时间】：2021-09-14 23:25:47
【问题描述】：

我正在尝试检测对iframe 的点击，但我发现无法检测到对iframe 的点击。

所以我正在考虑解决方法：

在iframe 上方添加一个透明层（div）。如果 iframe 的 z-index 为 0，则该层将为 1 或更大。

然后我将检测这一层上的点击，这应该是可行的。

并且该层应与iframe具有完全相同的尺寸，并放置在完全相同的位置。

我想知道该怎么做？

如果我在HTML中的iframe之前添加图层，前者会显示在后者上方的Y轴上，但想要的效果是前者显示在后者上方的Z轴上。

我或许可以使用 JavaScript 代码找到 iframe 的尺寸和位置，并为层设置相同的值，但似乎不太优雅。

任何更好的解决方案？

或者，任何人都可以教我如何消除 iframe 上的点击，那将是最佳选择！

任何提示将不胜感激！

【问题讨论】：

尝试在iframe 上显示透明div 的问题是div 尽管透明会干扰对iframe 的点击。您的用户将无法与iframe 互动。
@GeorgeSun 现在，我认为你是对的。下面的解决方案不像你说的那样工作......谢谢！

标签： javascript html css iframe frontend

【解决方案1】：

据我所知，无法跟踪您没有开发人员编辑权限的 iframe 上的点击次数。如果您确实可以访问它，请在 Google 上快速搜索使用 GTM 跟踪 iframe。假设您没有访问权限：

通过使用 position: absolute 创建一个具有透明背景的块，在 iframe 上添加一个图层应该很容易，尽管我不太确定使用它来跟踪点击。这是一个有用的链接，用于跟踪 div 上的点击：https://www.trevorayers.com/track-div-clicks-in-google-tag-manager/

我会尝试这样的：

<div class="iframe-parent">
<div class="transparent-block"></div>
<iframe></iframe>
</div> 
    
.iframe-parent {
width: 1150px;
height: 800px;
position: relative;
}
    
.transparent-block {
background-color: transparent;
width: 100%;
height: 100%;
position: absolute;
}

然后使用 Google 跟踪代码管理器跟踪对透明块选择器的点击。

未经测试，但有兴趣看看这是否适合您。

【讨论】：

欢迎来到 Stack Overflow，迈克尔！此实现将iframe 置于div 下方。
@GeorgeSun 谢谢。使用谷歌日历 iframe 更新和测试。仍然不确定它是否会按照他们想要的方式跟踪点击，但这会将透明块放在 iframe 的顶部。

【解决方案2】：

您可以尝试为此使用 CSS 定位。位置固定或绝对的单独 div。

上面的答案应该有效。

【讨论】：