如何在页面上多次加载相同的iframe？

目前，我在一个页面上多次加载一个项目的iframe。这导致严重的性能问题，我最终希望每个iframe都同步。现在没有发生这种情况，因为每个iframe都在不同的时间加载页面（毫秒关闭）。我可以使用JavaScript来加载一次iframe，然后在多个div中显示它吗？如何在页面上多次加载相同的iframe？

这是我到目前为止有：

http://gis.kodyahrens.com/AHRENS_SMPRG_SIMPLEPROGRAMTITLE_WEEK14.php

相关代码：

<div class="col-xs-12 col-md-3"> 
       <div class="panel panel-primary"> 
        <div class="panel-heading"> 
        <h3 class="panel-title">Grayscale</h3> 
        </div> 
        <div class="panel-body"> 
        <figure class="grayscale"> 
         <iframe width="100%" height="250" src="https://www.youtube.com/embed/ywCK-vZgpSM?rel=0&controls=0&showinfo=0&autoplay=1&VQ=240" frameborder="0" allowfullscreen></iframe> 
        </figure> 
        </div> 
       </div> 
      </div> 
      <div class="col-xs-12 col-md-3"> 
       <div class="panel panel-primary"> 
        <div class="panel-heading"> 
        <h3 class="panel-title">Sepia</h3> 
        </div> 
        <div class="panel-body"> 
        <figure class="sepia"> 
         <iframe width="100%" height="250" src="https://www.youtube.com/embed/ywCK-vZgpSM?rel=0&controls=0&showinfo=0&autoplay=1&VQ=240" frameborder="0" allowfullscreen></iframe> 
        </figure> 
        </div> 
       </div> 
      </div> 
      <div class="col-xs-12 col-md-3"> 
       <div class="panel panel-primary"> 
        <div class="panel-heading"> 
        <h3 class="panel-title">Saturate</h3> 
        </div> 
        <div class="panel-body"> 
        <figure class="saturate"> 
         <iframe width="100%" height="250" src="https://www.youtube.com/embed/ywCK-vZgpSM?rel=0&controls=0&showinfo=0&autoplay=1&VQ=240" frameborder="0" allowfullscreen></iframe> 
        </figure> 
        </div> 
       </div> 
      </div>

来源

2015-04-17 user808080

请提供一些相关的代码。 –

不知道你是否可以实现这一点，我的意思是每次你发送一个请求到网络，你会得到不同的回应。 – renakre

使用jQuery的.clone（）函数，你可以克隆一个元素。给你的原始iframe一个ID并克隆它是这样的：

$('#iframeID').clone().appendTo('#someotherdiv');

来源

2015-04-17 15:57:05

如何在页面上多次加载相同的iframe？

回答

相关问题