如何在链接点击时加载来自同一来源的两个iframe？

Question

我正在尝试在我的网站上显示服务的价目表，从Zoho Creator中拉出iFrames。我遇到的问题是，一个服务有一些产品有价格可用，而有些产品有按需定价。

这是两个不同的iframe，当单击该服务链接时，两者都应该显示出来。由于iFrame只能接受一个src属性，我如何通过单击同一链接来加载其中的两个属性？

到目前为止，我已经创建了按钮链接，其中每个链接都分配了唯一的类，如

<a class="button radiology button_size_2 button_js" href="#radiologija"><span class="button_label">Radiology</span></a> 

我有一个元素，第一个iframe是在页面加载时加载的：

<iframe id="declinedframe" class="embed-responsive-item" src="https://creator.zohopublic.com/example1" width="100%" height="585"></iframe> 

以及根据单击的链接更改iframe的jQuery代码。

(function($) {

  $('.changeframe').click(function () {
    $('#declinedframe').attr('src', 'https://creator.zohopublic.com/example2');
  });
  $('.radiology').click(function () {
    $('#declinedframe').attr('src', 'https://creator.zohopublic.com/example3'); // for radiology I need to load two iframes
  });
})( jQuery );

Answer 1

尝尝这个

​

$(function() {
  $('.changeframe').click(function () {
    $('#declinedframe').attr('src', 'https://creator.zohopublic.com/example2');
  });
  $('#radiologija').click(function () {
    $('#declinedframe').attr('src', 'https://creator.zohopublic.com/example2'); 
    if ($("#container").find("iframe").length===1) {
      const if2 = $('<iframe />',{ "id":"if2" });
      $('#declinedframe').next().after(if2);
    }
    $('#if2').attr('src', 'https://creator.zohopublic.com/example3'); 
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="button radiology button_size_2 button_js" href="#" id="radiologija"><span class="button_label">Radiology</span></a> 
<div id="container">
  <iframe id="declinedframe"></iframe><hr/>
</div>

​