[JS] iframe 내부 접근

이슈

채팅 서버 메인 html화면을 iframe으로 불러와 구현한 화면에서 iframe 내부 tag를 접근할 일이 생겼다.
처음에는 원 서버 html에서 iframe 호출 및 화면 세팅 이후에 접근을 할 수 있을거라 생각했는데 잘 되지 않아 방법을 찾아보았다.

해결

기본적으로 window object를 통해 document object에 접근할 수 있고 그다음 document의 element 중 하나에 접근 할 수 있다.
contentWindow property는 frame또는 iframe element에 의해 생성된 Window object를 반환해준다.

//main html
...
<iframe id="test" src="chatUrl">

</iframe>




//chat.html
...
<div id="toget">test div</div>

chat.html의 div#toget을 접근하기 위해

document.getElemtentById('test').contentWindow.document.getElementById("toget");

이러한 방식으로 접근하여 기능을 추가하는데 성공하였다.