JavaScript - iframe 안에서 부모에 DOM Element 추가 하는 방법

MSA 아키텍처로 개발을 하다 보면 iframe으로 추가되는 경우가 많다.

이 경우 풀스크린으로 다이얼로그를 띄워야 하는 경우가 있는데 이 경우는 iframe의 body에 DOM Element를 추가하면 iframe에서만 풀 스크린으로 뜨기 때문에 부모의 DOM에 Element를 추가해야 한다.

 

    var wnd = window.parent || window.top || window;
    var $div = document.createElement('div');
    wnd.document.body.appendChild($div);

window.parent, window.top, window 로 부모의 global (window) 오브젝트를 쿼리 하고,

그 후에 부모의 global 오브젝트에서 document.body에 접근하면 된다.