Question

目前，我正在页面中多次在项目上加载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>

Answer 1

使用jquery的.clone（）函数，可以克隆元素。为您的原始iframe提供ID并将其克隆为：

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

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

1 个答案: