[JS&jQuery] 하위 IFRAME 함수 호출(부모에서 자식 함수 실행)

1. Javascript

function wsMessage(e) {
	console.log("----- [ WebSocket ] Receive Data -----");
	
	try {
		var sendMessage = e.data;
		var data = JSON.parse(sendMessage);
		
		if( !isEmpty(data) ) {
			var size = $('iframe').length;
			
			console.log("----- [ Iframe Size ] "+ size +" -----");
			
			for( var i=0; i<size; i++ ) {
				// document.getElementById('프레임Id').contentWindow.호출 함수명();
				document.getElementById('iframe').get(i).contentWindow.eventboard(data);
			}
		}
	} catch(e) {
		console.log(e);
	}
}

 

2. jquery

function wsMessage(e) {
	console.log("----- [ WebSocket ] Receive Data -----");
	
	try {
		var sendMessage = e.data;
		var data = JSON.parse(sendMessage);
		
		if( !isEmpty(data) ) {
			var size = $('iframe').length;
			
			console.log("----- [ Iframe Size ] "+ size +" -----");
			
			for( var i=0; i<size; i++ ) {
				// ex1) $('#프레임Id').get(0).contentWindow.호출 함수명();
				// ex2) $('iframe').get(0).contentWindow.호출 함수명();
				$('iframe').get(i).contentWindow.eventboard(data);
			}
		}
	}
	catch(e) {
		console.log(e);
	}
}

 

3. 메서드

a. iframe 객체의 window

$('iframe').get(0).contentWindow

 

b. iframe 객체의 document

$('iframe').get(0).contentDocument
$('iframe').get(0).contentWindow.document

 

c. 부모 html에서 자식 iframe 함수 실행

$('#iframe').get(0).contentWindow.실행 함수명();
$('#iframe')[0].contentWindow.실행 함수명();

 

d. 부모 html에서 자식 iframe 변수 접근

$('#iframe').get(0).contentWindow.변수명;

 

e. 부모 html 에서 자식 iframe 접근, 제어

$('#iframe').contents().find('#id').text("하이");

 

f. 자식 iframe 에서 부모 html 변수, 함수 호출

window.parent.변수명 || 함수명; (parent : 한단계 부모 접근)
window.top.변수명 || 함수명; (top: 최상위 부모 접근)

 

g. iframe 이전 페이지로

$('iframe').get(0).contentWindow.history.go(-1);

 

h. iframe 새로고침

$('iframe').get(0).contentDocument.location.reload();

 

i. iframe 로드

$('iframe').load(function(){ // iframe이 모두 load된 후 제어
	$(this).contents().find('body');
});

 

j. 자식 iframe 에서 부모 html의 다른 iframe에 접근

// 1.
$('제어할 아이디', parent.frames['부모창 제어할 iframe의 name값'].document).html("하이");

// 2.
$('iframe 요소 아이디', parent.document).contents().find('body').html();

 

k. 자식 iframedptj (바로 위) 부모 요소 html 제어

// 1.
window.parent.document.getElementById('iframe아이디').contentWindow.document

// 2.
$('body', window.parent.document).css('background', 'red');

// 3.
$('body', top.document).css('background', 'red');

 

l. 윈도우 팝업창에서 부모창 제어

$('id', opener.document).css('display', 'none');

 

m. 현재창이 iframe인지 여부 확인

// 1. self는 iframe, top은 self를 포함하는 부모페이지(최상위)
if( self == top ) // true이면 최상위 부모

// 2.
if( window.frameElement ) // null이면 최상위 부모

 

 

🙏 참조 ::

• https://itrooms.tistory.com/710
• https://mylife365.tistory.com/10