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

Posted 2023-05-09

【中文标题】如何在链接点击时从同一来源加载两个 iframe？

【英文标题】：How do I load two iframes from the same source on link click?

【发布时间】：2021-01-01 02:50:06

【问题描述】：

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

这是两个不同的 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"  ></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 );

【问题讨论】：

您认为这会如何运作？你有一个 iFrame，然后你可以显示一个页面。如果您将 iFrame 的 URL 发送到您的服务器，您可能能够合并结果并显示在一个地方，甚至不必是 iFrame

你必须使用两个iframe。

@mplungjan 我想象它在单击一个链接时会以某种方式工作，该链接会在另一个 iframe 下方打开。

【参考方案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>