当人们单击特定部分时，在 iFRame 中执行操作

Question

我有一个内部有 3 个按钮的 iframe，当人们单击 iframe 的特定部分时，我想删除此按钮，而不是单击按钮时，而是单击 iframe 上的特定部分时。当人们点击该部分时，这 3 个按钮必须消失。

这是代码：

<div class="frame-container">
<button class="iframe-button">
<img src="pic_trulli.jpg" alt="Clicca nello spazio verde per andare avanti->">
</button>
<button class="iframe-button2">
<img src="pic_trulli.jpg" alt="I trucchi sono aggiornati e disponibili GRATIS!">
</button>
<button class="iframe-button3">
<img src="pic_trulli.jpg" alt="Registrati adesso per riceverli via EMAIL!">
</button>
<div style="overflow: hidden; margin: -120px auto; max-width:;"><br>
<iframe scrolling="no" width="370" height="363" frameborder="0" target="_self" src="test.com" />
</iframe>
</div>
</div>

.iframe-button {
  position: absolute;
  top: 180px;
  left: 32px;
  background-color: #3366cc;
  border: none;
  color: white;
  padding: 21px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 11px;
}
.iframe-button2 {
  position: absolute;
  top: 88px;
  left: 30px;
  background-color: #d9d9d9;
  border: none;
  color: #000000;
  padding: 9px 1px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
}
.iframe-button3 {
  position: absolute;
  top: 129px;
  left: 35px;
  background-color: #d9d9d9;
  border: none;
  color: #000000;
  padding: 11px 12.5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
}

Answer 1

@HannaRose 的问题很关键。

有两种情况：

1. 您的 iframe 指向您可以控制的网站
2. 您的 iframe 指向外部网站。

场景 1： 如果您的 iframe 指向您自己的网站，那么使用 iframe 可能不是最佳解决方案。 iframe 类似于单向窗口 - 当您与 iframe 后面的网站交互时，它不会返回任何数据或事件。 最好在页面上创建 3 个按钮来执行与 iframe 内的按钮相同的操作。

或者，在您的 iframe 指向的页面上 - 您可以在点击该页面时隐藏按钮。

场景 2： 如果您的 iframe 指向外部网站，您将根本无法隐藏按钮。如果可以，您将完全改变另一个网站的行为。 你能做的最好的就是在点击时隐藏整个 iframe