每次选择新选项卡时清空以前的选项卡式 iframe 内容

Question

我有一个选项卡式容器，每个选项卡中都有 iframe(不要骂我......我别无选择(。每个 iframe 的内容都非常大，因此当用户选择不同的选项卡时，我希望在加载和显示新选项卡及其 iframe 内容之前，从"旧"选项卡中删除 iframe 的内容 (HTML(。这样，仅应加载当前选定选项卡中的 iframe 内容，而其他选项卡中的所有 iframe 内容均为空。 我已经研究了如何清除 iframe 内容，但尽管我付出了努力，但我还是无法成功地将其应用于选项卡 jquery 代码。 谁能帮忙？ 小提琴：https://jsfiddle.net/kxh47qjo/

https://code.jquery.com/jquery-1.12.4.js
https://code.jquery.com/ui/1.12.1/jquery-ui.js
https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css

<div id="tabs">
  <ul>
    <li><a class="tabref" href="#tabs-1" rel="https://bing.com">Table1</a></li>
    <li><a class="tabref" href="#tabs-2" rel="https://jsfiddle.net">Table2</a></li>
    <li><a class="tabref" href="#tabs-3" rel="https://jqueryui.com/demos/tabs">Table3</a>
  </ul>
  <div id="tabs-1">
  </div>
  <div id="tabs-2">
  </div>
  <div id="tabs-3">
  </div>
</div>

.

$(function() {
  var $tabs = $('#tabs').tabs();
  // Select start tab index number
  var MASTER_STARTtab = 0;
  $("#tabs").tabs({active: MASTER_STARTtab
  });
  //Get tab contents
  beginTab = $("#tabs ul li:eq(" + MASTER_STARTtab + ")").find("a");
  loadTabFrame($(beginTab).attr("href"), $(beginTab).attr("rel"));
  // -----------------------------------
  $("a.tabref").click(function() {
    loadTabFrame($(this).attr("href"), $(this).attr("rel"));
  });
  //tab switching function
  function loadTabFrame(tab, url) {
    if ($(tab).find("iframe").length == 0) {
      var html = [];
      html.push('<div class="tabIframeWrapper">');
      html.push('<div class="openout"><a href="' + url + '"><border="0" 
alt="Open" title="Remove iFrame" /></a></div><iframe class="iframetab" src="' + url + '">Load Failed?</iframe>');
      html.push('</div>');
      $(tab).append(html.join(""));
      $(tab).find("iframe").height($(window).height() - 80);
    }
    return false;
  }
});

Answer 1

如果我

理解正确，您想删除旧选项卡的 iframediv。我认为您可以使用选项卡事件"beforeActivate"来访问旧选项卡并删除 iframediv 或其他元素。还要考虑到 loadTabFrame 函数在您返回到选项卡时始终添加 iframe。

  $( "#tabs" ).tabs({
    beforeActivate: function( event, ui ) {
      $(ui.oldPanel).find('div.tabIframeWrapper').remove();
    }
  });

这是更新的 jsfiddle