새 탭이 선택 될 때마다 이전 탭 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

제대로 이해했다면 이전 탭의 iframe div를 제거하고 싶습니다. 탭 이벤트 "beforeActivate"를 사용하여 이전 탭에 액세스하고 iframe div 또는 기타 요소를 제거 할 수 있다고 생각합니다. 또한 탭으로 돌아갈 때 loadTabFrame 함수가 항상 iframe을 추가한다는 점도 고려하십시오. 여기

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

는 왜 iframe을 사용하면 수동은 iframe을 추가하고 제거하지 updated jsfiddle