我尝试执行此操作,将图像放在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中编辑页面吗?


如果是这样,则在父页面(即您当前所在的页面)和子页面(即iframe中的页面)之间establish communication。请转至page,以获取有关如何检测iframe中的子页面何时加载的详细信息。
如果不是,则需要考虑此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>

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

10-12 15:00
查看更多