[JavaScript] iframe에서 바깥 영역(parent document)의 이벤트 동작하기

iframe을 사용하다보면 iframe을 띄운 영역(document) 에 접근하여 버튼등에 이벤트를 줘야하는 경우가 생긴다.

그러나, 시행착오를 해본 사람이라면 iframe내에 script 소스를 추가하여 이벤트를 주어봐도 iframe 바깥영역의 element를 찾지 못한다는 것을 알 수 있다.

 

Q. 왜 그런 것일까?

 

 

Re. Document 영역이 다르기 때문

허접한그림첨부..

위 그림은 modal창 영역 안에 iframe을 넣은 모습이라고 생각해보자.

 

설명을 추가하면 위 그림처럼 한 document 영역에서 iframe을 호출했다면 호출된 iframe은 또 다른 document이다. (iframe영역: 하늘색영역)

 

당연히 iframe dom객체에서 셀렉터를 이용해 찾아봤다 다른 dom객체에 있는 element는 찾을 수 없을 것이다.

 

그림에 적어놔서 눈치챘을 수 있겠지만 iframe을 호출하는순간 기존 document는 parent,  iframe은 child 가 되며

 

//iframe 내에서 parent로 접근
window.parent

위와 같이  parent에 접근이 가능하게 된다.

 

Q.그럼 위 그림의 iframe에서 modal창을 닫으려면 어떻게 이벤트를 주면 될까??

(parent에서는 이미 닫기버튼 클릭시 창이 닫히는 이벤트가 먹혀 있고, 버튼의 id='close')

 

Re.

parent.document.getElementById('close').trigger('click');

필자는 부모의 닫기 버튼을 찾아서 trigger로 클릭행위를 하여 처리 하였다.