时间戳

首页 > 解决方案 > javascript - 两个按钮分别打开 2 个 iframe

javascript - javascript - 两个按钮分别打开 2 个 iframe

问题描述

下午好，我在我的网站上使用了两个按钮，每个按钮打开一个不同的iframe. iframe问题是单击打开一个后，单击另一个按钮时另一个不会同时打开。

$(function() {
  $('#load').click(function() {
    if (!$('#iframe').length) {
      $('#iframeHolder').html('<iframe id="iframe" scrolling="no" style="border:0px;" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" width="100%" height="700px;"></iframe>');
    }
  });
});


$(function() {
  $('#load2').click(function() {
    if (!$('#iframe').length) {
      $('#iframeHolder2').html('<iframe id="iframe" scrolling="no" style="border:0px;" src="https://assets.wordpress.envato-static.com/uploads/2017/08/tropical-PS53BSA.jpg" width="100%" height="300px;"></iframe>');
    }
  });
});
<center>
  <a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load">PODCASTS</a>&nbsp;
  <a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load2">SCHEDULE</a>
</center>
<br>
<br>
<br>
<div id="iframeHolder"></div>
<br>
<br>
<div id="iframeHolder2"></div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

标签： javascripthtmliframe

解决方案

因为这正是你if(!$('#iframe').length)的两个按钮所阻止的。当您将新 HTML 附加到页面时，它会包含一个带有id="iframe". 因此，下次您运行该if语句时，.length大于0所以检查false并且该if块不执行。

没有那个if，你可以同时打开：

$(function(){
    $('#load').click(function(){ 
        $('#iframeHolder').html('<iframe scrolling="no" style="border:0px;" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" width="100%" height="700px;"></iframe>');
    });   
});
        
        
$(function(){
    $('#load2').click(function(){ 
        $('#iframeHolder2').html('<iframe scrolling="no" style="border:0px;" src="https://assets.wordpress.envato-static.com/uploads/2017/08/tropical-PS53BSA.jpg" width="100%" height="300px;"></iframe>');
    });   
});
<center><a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load">PODCASTS</a>&nbsp;<a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load2">SCHEDULE</a>
<br>
<br>
<br>
<div id="iframeHolder"></div>  
<br>
<br>
<div id="iframeHolder2"></div>  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

注意：我还从附加的 HTML 中删除了id="iframe"，因为您不想将两个相同的元素附加id到页面。如果您需要这些元素具有 ID，它们必须是唯一的。

另一方面，如果您希望能够在两者之间切换，那么您可能希望将它们放在一个容器中，而不是放在它们自己的容器中：

$(function(){
    $('#load').click(function(){ 
        $('#iframeHolder').html('<iframe scrolling="no" style="border:0px;" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" width="100%" height="700px;"></iframe>');
    });   
});
        
        
$(function(){
    $('#load2').click(function(){ 
        $('#iframeHolder').html('<iframe scrolling="no" style="border:0px;" src="https://assets.wordpress.envato-static.com/uploads/2017/08/tropical-PS53BSA.jpg" width="100%" height="300px;"></iframe>');
    });   
});
<center><a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load">PODCASTS</a>&nbsp;<a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load2">SCHEDULE</a>
<br>
<br>
<br>
<div id="iframeHolder"></div>  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

另请注意，使用 2 个document.ready处理程序是多余的。对于每个点击处理程序，您不需要那么多仪式，只需创建它们：

$(function(){
    $('#load').click(function(){ 
        $('#iframeHolder').html('<iframe scrolling="no" style="border:0px;" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" width="100%" height="700px;"></iframe>');
    });   

    $('#load2').click(function(){ 
        $('#iframeHolder').html('<iframe scrolling="no" style="border:0px;" src="https://assets.wordpress.envato-static.com/uploads/2017/08/tropical-PS53BSA.jpg" width="100%" height="300px;"></iframe>');
    });   
});

推荐阅读