我正在使用带有标签的iframe视频系统来分隔它们,我遇到的问题是,进入该部分时,所有iframe都已加载。我在许多其他问题中都找到了这个答案,但无法解决同时加载To Load a video embed using "onclick" function to optimize a web page的问题,但是现在我遇到的问题是,使用jquery的解决方案选择选项1(iframe)正常加载,但是如果我同时按了选项2继续加载,即选项1在另一个被按下的选项下继续加载。
我将其应用到的系统是.tpl文件上的Datalife Engine和jquery 1.8.2,我可以将其更改为最新版本,但结果相同
<script>
$(document).ready(function() {
$("#myButton").on("click",function() {
var $iframe = $("#myIframe");
$iframe.attr("src","https://www.youtube.com/embed/6wUxpFu9Wvo");
$iframe.show();
});
});
$(document).ready(function() {
$("#myButton1").on("click","https://www.youtube.com/embed/6wUxpFu9Wvo");
$iframe.show();
});
});
</script>
<script language="javascript" type="text/javascript">
$(function(){
$('.close').click(function(){
$('iframe').attr('src',$('iframe').attr('src'));
});
});
</script>
<iframe id="myIframe" width="560" height="315" style="display:none;" src="" frameborder="0" allowfullscreen></iframe>
<button id="myButton" class="close">Load video</button>
<iframe id="myIframe1" width="560" height="315" style="display:none;" src="" frameborder="0" allowfullscreen></iframe>
<button id="myButton1" class="close">Load video</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
最终结果是,选项1仍在另一选项下加载,我正在尝试重新加载iframe,但是那些具有自动播放功能的视频继续加载到新选择的iframe以下