Javascript 如何在一个页面上多次加载同一iframe?

Javascript 如何在一个页面上多次加载同一iframe?,javascript,jquery,html,iframe,Javascript,Jquery,Html,Iframe,目前,我在一个页面中多次在项目上加载iframe。这会导致严重的性能问题,我最终希望每个iframe都保持同步。现在不会发生这种情况,因为每个iframe在不同的时间(毫秒间隔)加载页面。我可以使用JavaScript加载iframe一次,然后在多个div中显示它吗 以下是我到目前为止的情况: 相关代码: <div class="col-xs-12 col-md-3"> <div class="panel panel-primary">

目前,我在一个页面中多次在项目上加载iframe。这会导致严重的性能问题,我最终希望每个iframe都保持同步。现在不会发生这种情况,因为每个iframe在不同的时间(毫秒间隔)加载页面。我可以使用JavaScript加载iframe一次,然后在多个div中显示它吗

以下是我到目前为止的情况:

相关代码:

<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');

请提供一些相关的代码。不确定你们是否能做到这一点,我的意思是每次你们向网络发送请求时,你们都会得到不同的响应。