如何防止一个iframe在另一个iframe下工作?

我正在使用带有标签的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以下

starguping66896605 回答:如何防止一个iframe在另一个iframe下工作?

您可以使用相同的iFrame并通过单击几个按钮来更改其src。 以下是一个与您类似的示例,其中包含一个iFrame和3个按钮。每个按钮在同一iFrame中加载不同的视频。我正在使用youtube video id区分视频。

$(function() {
  $(".myButton").on("click",function() {
    var videoId = $(this).data('video-id');
    var $iframe = $("#myIframe");

    $iframe.attr("src","https://www.youtube.com/embed/" + videoId);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="myIframe" width="560" height="315" src="" frameborder="0" allowfullscreen style="border: 1px solid black;"></iframe>
<br />
<button id="button1" class="myButton" data-video-id="6wUxpFu9Wvo">Load video 1</button>
<button id="button2" class="myButton" data-video-id="z5jnpb_lp4w">Load video 2</button>
<button id="button3" class="myButton" data-video-id="6wUxpFu9Wv2">Load video 3</button>

本文链接:https://www.f2er.com/3156296.html

大家都在问