单击时动态加载iframe
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了单击时动态加载iframe相关的知识,希望对你有一定的参考价值。
我有一个bootstrap 3列youtube视频
<div class="col-md-4">
<div class="video_img_wrapper">
<img class="video_img" data-toggle="modal" class="ytVideo" id="'.$item->id->videoId.'" data-target="#myModal_'.$item->id->videoId.'" src="'.$thumbnailUrl.'" />
<img src="'.get_bloginfo('template_url').'/assets/img/playicon-nl.png" class="fa-play-circle-o" aria-hidden="true" data-toggle="modal" data-target="#myModal_'.$item->id->videoId.'" />
</div>
<div class="video_title"><span>'. $item->snippet->title .'</span></div>
</div>
<div class="modal fade youtube-modal" id="myModal_'.$item->id->videoId.'" role="dialog">
<div class="modal-dialog">
<div class="modal-body" id="videoModalBody"></div>
</div>
</div>
我在#videoModalBody
div中使用jquery注入iframe
$(".video_img").click(function(evt){
var videoId = $(this).attr("id");
var iframe = '<iframe enablejsapi=1 id="myModal_'+videoId+'" width="850" height="500" src="https://www.youtube.com/embed/'+videoId+'" frameborder="0" allowfullscreen></iframe>';
$("#videoModalBody").append(iframe);
});
我如何更改我的javascript,以便当我点击另一个视频时,前一个视频会从DOM中删除?
答案
您可以在class
上设置全局iframe
然后在添加新的之前删除所有iframe
:
$('.globalIframe').remove();
$("#videoModalBody").append(iframe);
$(".video_img").click(function(evt) {
var videoId = $(this).attr("id");
var iframe = '<iframe enablejsapi=1 id="myModal_' + videoId + '" class="globalIframe" width="850" height="500" src="https://www.youtube.com/embed/' + videoId + '" frameborder="0" allowfullscreen></iframe>';
$('.globalIframe').remove();
$("#videoModalBody").append(iframe);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="video_img">Click Me</a>
<div id="videoModalBody"></div>
另一答案
您可以按类名引用它或在变量IE中存储引用:
var videoId = null; // Shared reference
$(".video_img").click(function(evt){
if (videoId) $('#'+videoId).remove(); //remove previous videos if present
videoId = $(this).attr("id"); //store new id
var iframe = '<iframe enablejsapi=1 id="myModal_'+videoId+'" width="850" height="500" src="https://www.youtube.com/embed/'+videoId+'" frameborder="0" allowfullscreen></iframe>';
$("#videoModalBody").append(iframe);
});
以上是关于单击时动态加载iframe的主要内容,如果未能解决你的问题,请参考以下文章
编写 jQuery 以在单击时更改动态 iframe 的尺寸 [关闭]
结合两个代码片段?将用户输入的 Youtube url 转换为嵌入 url,然后将 iframe src 替换为转换后的 url