CSS 使 iframe 的点击穿透，但不包括 iframe 的 body

在本文中，我们将介绍如何使用CSS实现iframe的点击穿透效果，但保留iframe的body部分不受影响。

阅读更多：CSS 教程

什么是点击穿透

点击穿透是指当一个元素在被覆盖的情况下，点击事件通过覆盖元素传递给被覆盖元素的现象。在HTML中，iframe是一种常用的元素用于嵌入其他网页或文档。然而，默认情况下，当iframe被另一个元素覆盖时，点击事件将被覆盖元素捕获，而不是传递给iframe内部的内容。因此，我们可以通过CSS来解决这个问题，实现iframe的点击穿透效果。

解决方法

要实现iframe的点击穿透效果，我们需要使用CSS的pointer-events属性。pointer-events属性可以控制元素是否可以成为鼠标事件的目标。默认情况下，pointer-events属性设置为auto，表示元素可以作为鼠标事件的目标。而我们想要的效果是让iframe的点击事件透过它的覆盖元素传递到其内部的内容，所以我们需要将pointer-events属性设置为none。

下面是一个示例代码，演示如何使用CSS实现iframe的点击穿透效果：

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 设置为none，实现点击穿透 */
}

iframe {
  width: 100%;
  height: 100%;
}

在上面的代码中，我们首先创建了一个覆盖元素，并为其设置了绝对定位，以覆盖整个iframe。接下来，我们将覆盖元素的pointer-events属性设置为none，这样点击事件将可以透过覆盖元素传递到iframe内部。最后，我们设置了iframe的宽度和高度，以占满整个父元素。

为了让这个示例更加直观，我们可以在iframe中嵌入一个网页，并在覆盖元素上添加一层半透明背景色，以区分鼠标点击的效果。下面是一个完整的示例代码：

<div class="overlay"></div>
<iframe src="https://www.example.com"></iframe>

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 添加半透明背景色 */
  pointer-events: none; /* 设置为none，实现点击穿透 */
}

iframe {
  width: 100%;
  height: 100%;
}

在上面的代码中，我们将覆盖元素的背景色设置为半透明，这样当我们点击覆盖元素时，可以清楚地看到鼠标事件透过它传递到了iframe内部。

总结

通过使用CSS的pointer-events属性，我们可以实现iframe的点击穿透效果，同时保留iframe的body部分的可点击性。通过设置覆盖元素的pointer-events属性为none，我们可以让点击事件透过覆盖元素传递到iframe内部，从而实现了点击穿透效果。这一技巧可以在某些特定的场景中非常有用，帮助我们更好地控制和操作iframe元素。请记住，在实际使用中确保兼容性和性能，并根据具体的情况进行适当的优化。