时间戳

首页 > 解决方案 > 当人们单击特定部分时，在 iFRame 中执行操作

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

问题描述

我有一个内部有 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;
}

标签： javascripthtmljquerycssiframe

解决方案

@HannaRose 的问题很关键。

有2种情况：

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

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

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

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

推荐阅读