Question

我在每个标签中都有一个带有iframe的标签式容器（不要责骂我......我对此没有其他选择）。每个iframe的内容都非常大，因此当用户选择不同的标签时，我想要来自“旧”的iframe的内容（HTML）。在加载和显示新选项卡及其iframe内容之前要删除的选项卡。这样，只应加载当前所选选项卡中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

如果我理解正确，您要删除旧标签的iframe div。我认为您可以使用标签事件＆＃34; beforeActivate＆＃34;来访问旧标签并删除iframe div或其他元素。另请注意，当您返回选项卡时，loadTabFrame函数始终会添加iframe。

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

以下是updated jsfiddle

每次选择新选项卡时清空上一个选项卡式iframe内容

1 个答案: