JavaScript에서 iframe 본문(body) 내용을 가져오는 방법

JavaScript로 iframe의 body 콘텐츠 가져오기

iframe 내부의 본문(body) 콘텐츠를 가져오려면 src 속성을 활용하거나, 아래 코드 예제처럼 window.frames 객체를 사용하는 방법이 있습니다.

코드 예제

<iframe id="myId" name="myId">...</iframe>

<script>
    var myDoc;

    if (window.frames && window.frames.myId && (myDoc = window.frames.myId.document)) {
        var iframeBody = myDoc.body;
        var content = iframeBody.innerHTML;
    }
</script>

동작 원리

위 코드는 다음과 같은 순서로 동작합니다.

1. 프레임 접근 확인: window.frames 객체와 해당 이름(myId)을 가진 프레임이 존재하는지 먼저 확인합니다. 이 검증 단계를 통해 존재하지 않는 iframe에 접근할 때 발생할 수 있는 오류를 방지합니다.

2. 문서 객체 획득: 조건이 충족되면 window.frames.myId.document를 통해 iframe 내부의 document 객체를 변수 myDoc에 할당합니다.

3. 본문 내용 추출: myDoc.body로 iframe의 body 요소에 접근한 뒤, innerHTML 속성을 사용해 내부 HTML 콘텐츠를 문자열 형태로 가져옵니다.

주의 사항

iframe의 콘텐츠에 접근하려면 부모 페이지와 iframe이 동일 출처(same-origin) 정책을 만족해야 합니다. 서로 다른 도메인의 문서를 로드한 경우 보안 정책상 document 객체에 접근할 수 없으므로, 필요하다면 서버 측 프록시나 postMessage API를 활용하는 것이 좋습니다.