Question

我尝试执行此操作，将图像放置在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。

Answer 1

未完全加载iframe时，应显示加载的gif。如果加载iframe的速度较慢，则加载gif是一件好事，但是以最小的延迟或没有延迟的iframe加载会更好。

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

您可以在iframe中编辑页面吗？
- 如果是这样 ，则在父页面（即您当前所在的页面）和子页面（即该页面中的页面）之间establish communication iframe）。有关如何检测何时在iframe中加载子页面的详细信息，请转到page。
- 如果不是 ，则需要考虑本post中所述的替代方法。

确定已加载iframe后，请删除加载器gif并显示播放按钮图像。
将click事件委托给播放按钮图像，并让回调函数删除播放按钮图像并显示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();
});
```
- 如果发生“双击” 行为（例如，用户单击了一次按钮，并且调用了回调函数，但很快对第二次幻像单击做出了反应），请向其中添加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>

Answer 2

如果我理解正确，则您希望iframe前面的元素消失，然后在脚本中使用remove class命令不起作用。也许您引用了错误的对象以从中删除该类？代替 $(this).removeClass("play-background") 尝试 $("body").removeClass("play-background")

如何删除iframe上的图片，播放？使用JavaScript

2 个答案: