javascript - 如何删除 iframe 上的图像、播放？使用 JavaScript

我尝试这样做，将图像放在 iframe 上，当我点击它时，我看到一个 gif 图像(上传)，最后我用 JavaScript 显示 iframe，我尝试用这段代码来做到这一点，但是我无法删除图像，它只保留 gif 图像。

我想做这样的事情:

https://sv.danimados.com/gilberto.php?id=cHJsZ0MwWXFDb2h1eGJrcUI0WFlsWnYyN3puT1BzbWtqSDlrWlZ3R3BQNGI3V3RjOWNDZ3kwWStFVDVNQmx1Ng==&sv=UploadYour

<html>
<head>
<meta charset="UTF-8">
<meta name="googlebot" CONTENT="noindex" />
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
}

.container {
    height: 100%;
    overflow: auto;
}

.section {
    position: relative;
    width: 100%;
}

.section p {
    margin: 0;
}

/* sizes */

.fit {
    height: 100%;
}

.wide {
    height: auto;
    padding-top: 56.25%;
    /* 9 / 16 = 0.5625 */
}

.wide .content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/* centering */

.t {
    display: table;
    width: 100%;
    height: 100%;
}

.tc {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.cargando {
    color: #fff;
    font-family: Arial;
    position: relative;
    font-size: 20px;
    z-index: 1;
    font-weight: bold;
    top: 35%;
    cursor: pointer;
}

.cargando img {
    width: 150px;
    height: 150px;
}

.theplayer {
    z-index: 10000;
}

.play-background:hover {
    transition: all .6s;
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.play-background {

    cursor: pointer;

}
iframe {
    position:absolute;top:0;left:0;width:100%;height:100%;display: none; }


</style>



</head>
<body class="play-background">
<div class="container">
    <div class="section fit">
        <div class="t">
            <div class="tc">
                <div class="cargando">
            <img class="load" style="display: none;" src="https://i.imgur.com/Be2Lu9R.gif"><img class="go-boton" src="https://sv.danimados.com/images/play_button.png"><div class="server">Servidor: <b>NeoPen-O-SV</b></div></div>
    <iframe src="https://sendvid.com/embed/0bmbrf7a" width="100%" height="100%" z-index="1000" style="border: none"></iframe>
            </div>
        </div>
    </div>

</div>
</body>
<script type="text/javascript">

 $( ".play-background" ).click(function() {

  $(".go-boton").hide();
  $(".load").show();
  $(".theplayer").show();

  $(this).removeClass("play-background");
});
</script>
</html>

正如我点击时所做的那样，我看到了加载的 gif 图像，然后消失并显示 iframe。

最佳答案

当 iframe 未完全加载时，应该出现加载 gif。如果您的 iframe 加载速度较慢，那么加载 gif 是一件好事，但以最小延迟或无延迟加载 iframe 会更好。

您的页面有多个 iframe 吗？
- 如果是这样，您应该重新评估您的布局。 iframe 是加载最慢的元素，渲染多个 iframe 会增加加载时间。
- 如果不是，您应该重新评估 iframe 本身的内容。如果内容是视频，请尝试使用其他服务上传和播放视频，例如 YouTube 或您自己的网站等。

<小时/>

您可以在 iframe 中编辑页面吗？
- 如果是这样，则 establish communication父页面(即您当前所在的页面)和子页面(即 iframe 内的页面)之间。转到此page了解有关如何检测 iframe 中的子页面何时加载的详细信息。
- 如果没有，您需要考虑此 post 中描述的替代方案。 .

<小时/>

确定 iframe 已加载后，删除加载器 gif 并显示播放按钮图像。
将点击事件委托(delegate)给播放按钮图像，并让回调函数删除播放按钮图像并显示 iframe。
```
$(play-button-image).on('click', function(e) {
  $('iframe')[0].src = 'https://html5demos.com/assets/dizzy.mp4';
  $(this).fadeOut().removeClass('active');
  $('iframe, figcaption').fadeIn().addClass('active');
  e.stopPropagation();
});
```
- 如果发生“双击”行为(前用户单击按钮一次并调用回调函数，但对第二次幽灵单击快速使用react)，请添加 e.stopPropagation (); 到回调函数的末尾，以防止事件冒泡触发在祖先标记上注册的任何其他事件处理程序。
- 添加/删除表示标签状态(例如隐藏或显示)的特殊类(例如 .active)

<小时/>

应用类似的事件处理程序，该事件处理程序将删除 iframe 并显示播放按钮图像。在演示中，用户单击 figcaption.caption(请参阅演示中的最后一个代码块)。

<小时/>

注意: 在演示中，调用 setTimeout() 来模拟 iframe 缓慢加载。此外，由于 SO 沙箱规则，某些功能被阻止(figcaption.caption 不显示、视频不响应等)。要运行完整功能，请将源代码复制并粘贴到文本文件中，使用 .html (alt .htm) 扩展名保存文件名，然后在浏览器中打开。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.5);
    }
    
    main {
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;
      margin: 5vh auto;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    
    .hframe {
      margin: 0 auto;
      padding-top: 56.25%;
      width: 100%;
      height: auto;
      position: relative;
    }
    
    iframe {
      min-width: 100%;
      min-height: 100%;
      position: absolute;
      z-index: 0;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.3);
    }
    
    .hframe img {
      width: 150px;
      height: 150px;
      position: absolute;
      z-index: 0;
      top: calc(50% - 75px);
      left: calc(50% - 75px);
      cursor: pointer;
    }
    
    .load:hover {
      cursor: not-allowed;
    }
    
    .caption {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      right: 0;
      overflow: hidden;
      text-align: center;
      font: 100 small-caps 1.2rem/1.2rem Verdana;
      color: cyan;
      background: rgba(0, 0, 0, 0.2);
    }
    
    .go:hover,
    .caption:hover {
      transition: all .6s;
      transform: scale(1.1);
      cursor: pointer;
    }
    
    .active {
      display: block !important;
      z-index: 1000;
    }
  </style>

</head>

<body>
  <main>
    <figure class="hframe">
      <img class="load active" src="https://i.imgur.com/Be2Lu9R.gif">
      <img class="go" src="https://sv.danimados.com/images/play_button.png" style="display: none;">
      <iframe src="" frameborder="0" allowfullscreen style="display: none;"></iframe>
      <figcaption class='caption' style="display: none;"><a>Server: <b>NeoPen-O-SV</b></a></figcaption>
    </figure>
  </main>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(window).on('load', loading);

    function loading(e) {
      setTimeout(function() {
        $('.load').fadeOut().removeClass('active');
        $('.go').fadeIn().addClass('active');
      }, 2500);
    }

    $('.go').on('click', function(e) {
      $('iframe')[0].src = 'https://html5demos.com/assets/dizzy.mp4';
      $(this).fadeOut().removeClass('active');
      $('iframe, .caption').fadeIn().addClass('active');
      e.stopPropagation();
    });

    $('.caption').on('click', function(e) {
      $('iframe, .caption').fadeOut().removeClass('active');
      $('.go').fadeIn().addClass('active');
      $('iframe')[0].src = '';
      e.stopPropagation();
    });
  </script>
</body>

</html>

关于javascript - 如何删除 iframe 上的图像、播放？使用 JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57028822/

javascript - 如何删除 iframe 上的图像、播放？使用 JavaScript

上一篇：javascript - 我可以在 application+json 脚本中做数学吗？

下一篇：javascript - 从另一个数组中存在的对象数组中删除对象