javascript - 如何使用 jquery 克隆 iframe？

Question

每个人我都有两个div id我有一个 in，我正在使用 jquery 滚动它的内容。

now i want onscroll pause the video in "myplayer" and it should play from same time in "getMyPlayer"  

提前致谢。

$(window).scroll(function (event) {
   var scroll = $(window).scrollTop();
   /* alert(scroll);*/
   if(scroll > 600)
   {
     $('#getMyPlayer').css('display','block');
   }
   else
   {
     $( '#myplayer' ).clone().appendTo( '#getMyPlayer' );
     $('#getMyPlayer').css('display','none'); 
   }
});

<div id="myplayer">
<iframe width="500" height="500" src="//www.ytapi.com/embed/<?php echo $yt->id ?>?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div> 
<div id="getMyPlayer"></div>

Answer 1

您所要做的就是在 .clone() 之前将 iframe 添加到选择器。

$(window).scroll(function (event) {
   var scroll = $(window).scrollTop();
   /* alert(scroll);*/
   if(scroll > 600)
   {
     $('#getMyPlayer').css('display','block');
   }
   else
   {
     $( '#myplayer iframe' ).clone().appendTo( '#getMyPlayer' ); // this line is different
     $('#getMyPlayer').css('display','none'); 
   }
});

不过要小心，因为每次更新滚动位置时都会运行这段代码。我建议添加一个 if 语句以在克隆之前检查它是否已被复制。

$(window).scroll(function (event) {
   var scroll = $(window).scrollTop();
   /* alert(scroll);*/
   if(scroll > 600)
   {
     $('#getMyPlayer').css('display','block');
   }
   else
   {
     if ($( '#getMyPlayer iframe' ).length === 0) {
         $( '#myplayer iframe' ).clone().appendTo( '#getMyPlayer' ); 
         $('#getMyPlayer').css('display','none'); 
     }
   }
});