Emptying previous tabbed iframe contents each time new tab selected

Question

I have a tabbed container with iframes in each tab (don't scold me... I have no alternative on this one). The contents of each iframe are very large, so when a user selects a different tab, I want the contents (HTML) of the iframe from the 'old' tab to be removed before the new tab and its iframe contents are loaded and displayed. In this way, only ever should the contents of the iframe in the currently selected tab be loaded, while all iframe content in the other tabs is empty. I've researched how to clear iframe contents, but despite my efforts I'm just not able to apply it successfully to the tabs jquery code. Can anyone help? Fiddle: 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;
  }
});

why not remove the iframe are you adding the iframe manually? — Muhammad Omer Aslam, Nov 14 '17 at 11:45

score 1 · Accepted Answer · answered Nov 14 '17 at 11:43

1

If I understood correctly, you want to remove the iframe div of the old tab. I think you can do that using the tabs event "beforeActivate", to access the old tab and remove the iframe div, or other element. Also take into account that loadTabFrame function always adds the iframe when you return to the tab.

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

Here is the updated jsfiddle

answered Nov 14 '17 at 11:43

Claudio

5,078
1
22
33

that seems to work great. I can see the iframe is being removed and re-created each time. Are you able to confirm whether the iframe contents (ie the HTML) are also being totally cleared each time? – Silverburch Nov 14 '17 at 11:48
I can't confirm that, but take a look the following threads [1](https://stackoverflow.com/questions/22451674/wrong-content-when-refresh-a-page-contains-iframes-in-ie) and [2](https://stackoverflow.com/questions/2524502/refresh-iframe-cache-issue), they suggest adding a random string to the iframe urls every time the tab is loaded to avoid cache problems. – Claudio Nov 14 '17 at 11:59
Brilliant. Your help much appreciated. – Silverburch Nov 14 '17 at 12:03

Emptying previous tabbed iframe contents each time new tab selected

1 Answers1