目前,我在一个页面中多次加载一个项目的 iframe。这会导致严重的性能问题,我最终希望每个 iframe 都同步。现在不会发生这种情况,因为每个 iframe 都在不同的时间(毫秒)加载页面。我可以使用 JavaScript 加载一次 iframe,然后在多个 div 中显示它吗?
这是我目前所拥有的:
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>
最佳答案
使用 jquery 的 .clone() 函数,您可以克隆一个元素。为您的原始 iframe 提供一个 ID 并像这样克隆它:
$('#iframeID').clone().appendTo('#someotherdiv');
关于javascript - 如何在页面上多次加载同一个 iframe?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29698303/