iframe 내 요소와 부모 요소 간 통신 및 정리

부모 요소에 있는 함수 호출

부모 요소에 있는 함수

function test1(h) {
		alert('부모창 제어' + h);
		
};

자식 요소에서 함수 호출(parent.함수이름();)

parent.test1(h);

 

 

자식 요소에 있는 함수 호출

자식 요소에 있는 함수

 function sub(id) {
    	console.log("자식창 호출" + id);
    	
    };

 

부모 요소에서 자식 요소 호출

ifrm은 iframe의 name 값이다 (<iframe class = "iframe_class" name = "ifrm"></iframe>

ifrm.sub(id);

 

자식요소에서 iframe 높이 조절(grid사용시 조회가 완료될 때 실행, gridComplete에 입력)

gridComplete : function(){        // 그리드가 완전히 모든 작업을 완료한 후 발생하는 이벤트
   console.log("조회완료");
   //grid_height();
   //alert(parent.test1);  <- 부모 요소 함수 확인
   var h = window.parent.document.getElementById("iframe").style.height = $("#gridlist").height() + 340 +"px";
   <- iframe 요소 높이 조절
   
   parent.test1(h); <- 부모 요소 함수 호출
            	
 },

 

선택자 참고 블로그

jang2r.tistory.com/33

개발노트 :: 제이쿼리(Jquery) 부모, 형제, 자식 선택자#3

 

실제 처리 방법

var gTabId;

function addTab(name, PROGRM_FILE_NM) {
// 		alert(name);
// 		alert(PROGRM_FILE_NM)
		var tabLen = $("#ul_list").find("li").length;
		if(tabLen > 9){
			alert("탭 메뉴는  최대 10개까지 가능합니다.");
			return false;
		}
        tabID++
        var menuNm = $(name).text();
        var Nm = PROGRM_FILE_NM;
        $("#ul_list").append('<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-'+tabID+'">'+menuNm+'<button class="close" type="button" title="Remove this page"><span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></button></a></li>');
        $('#tab-content').append($('<div class="tab-pane fade" id="tab-' + tabID + '"><iframe src="'+Nm+'" width="100%" id="menuNm-' + tabID +'" style="min-height:800px;" frameborder="0" framespacing="0" marginheight="0" marginwidth="0"  vspace="0"></iframe></div>')); 
        $('#ul_list li:last-child a').tab('show');      

        gTabId = document.getElementById("menuNm-"+ tabID +"");

	};

전역변수로 설정하고 

iframe을 생성하는 부분에 id값을 담는다 그 후 iframe내부에서 호출한다

var pId = parent.gTabId;