[JS] iframe 사용시 부모 함수 호출

프론트 개발을 하다보면 가끔 iframe을 사용할 때가 있다. iframe의 사용 목적이 그저 해당 주소의 창을 보여주는 것이라면 상관 없지만 가끔씩은 iframe 창과 부모 창간의 통신이 필요할 때가 있다. 예를들어 메인 화면이 있고 이들을 보면서 실시간으로 화면 수정을 하고 싶을 때 iframe과 부모간의 통신을 사용한다. 이번 포스팅에서는 Iframe에서 부모 함수를 호출하는 방법에 대해서 알아보려고 한다.

 

 

기본 구성

 

현재 진행중인 프로젝트는 프로필(이력서) 작성 사이트인데 여기에 메인 페이지가 있습니다.

 

근데 따로 edit 페이지를 줘서 url이 edit일 경우 수정 버튼들을 활성화 시켜 edit과 메인 페이지간 통신을 구현하려고 합니다. 오른쪽은 edit의 html element이고 왼쪽은 iframe으로 띄운 것입니다.

 

 

iframe 부모 함수 호출, 데이터/이벤트 통신

 window.parent.postMessage({data:data})

이런식으로 window 객체의 parent.postMessage 메소드를 호출하여 데이터를 전송합니다. 현재 자신이 iframe 창에서 띄워진 경우 parent 창으로 데이터를 보내는 역할을 합니다. (물론 이 함수 구현 전에 기본적으로 iframe에서 창을 띄우는 것을 허용해주어야 합니다.)

 

 

window.addEventListener("message",function(result){
	let data = result.data;
}

그리고 부모 페이지 script에 해당처럼 message event를 window 객체에 등록시킨 후에 data를 받을 수 있습니다. 참 쉽죠? 만약 데이터 통신 시 이벤트 구분이 필요하면 data 인자로 타입 변수를 추가하여 이를 if문으로 처리하면 됩니다.