JS - iframe 페이지에서 부모 페이지 요소 제어하기, 샘플 포함

개요

iframe에서 부모 페이지의 요소를 제어해야 할 때가 있다.

내 상황으로 예를 들자면, iframe 페이지에서 선택한 값을 부모 페이지로 넘겨주고 싶다.

보통 다른 페이지간 데이터 전달은 URL 주소 뒤에 물음표(?) 기호를 이용하는 쿼리 스트링을 사용하지만,

페이지 내에 구성되어 있는 iframe은 조금 경우가 다르다.

방법

요소를 선택하는 것은 기본적으로 document.getElementId를 사용한다.

여기서 부모 요소를 의미하는 window.parent 키워드를 추가적으로 이용하면 된다.

window.parent:
- window.parent는 현재 iframe의 부모 창을 참조하는 것을 의미한다.
- iframe 내부에서 실행될 때 window.parent를 통해 부모 문서의 window 객체에 접근할 수 있다.
  * 윈도우 객체는 브라우저 창을 나타내는 전역 개체를 의미한다.
document:
- document 객체는 HTML 문서 전체를 나타내며, DOM(Document Object Model)의 루트 노드를 의미한다.
- 즉, DOM을 접근하고 다룬다는 것은 document 객체를 이용한다는 것과 같은 표현이다.
getElementById:
- 주어진 ID 값을 가진 요소를 선택하는 메서드이다.
- 만약 일치하는 요소가 없으면 null을 반환한다.

확인을 위한 테스트 페이지 구성

부모 페이지와 iframe 페이지를 간단히 구성해보자.

부모 페이지

iframe을 구성할 요소와 값을 넘겨 받아 출력할 textarea 요소, 단 두 개로 구성한다.

<!-- main.html -->

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- iframe 표시 영역 -->
    <div name="iframeContainer">
        <iframe src="iframe.html"></iframe>
    </div>
    <!-- iframe의 값을 넘겨 받은 값을 보여줄 영역 -->
    <div name="textContainer">
        <textarea id="textField" cols="45"></textarea>
    </div>
</body>
</html>

아이프레임 페이지

단순히 값을 넘길 버튼 하나로만 구성한다.

단, 자바스크립트를 이용하여 버튼 클릭 시, 해당 값을 부모 페이지로 넘겨주는 기능을 추가 구현한다.

자바스크립트 함수명 : sendParent

<!-- iframe.html -->

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 함수 실행을 위한 자바스크립트 파일 -->
    <script src="iframe.js">
</head>
<body>
    <button id="iframeContent" onclick="sendParent(this)">이 데이터를 부모 페이지의 요소로 전달해보자.</button>
</body>
</html>

요소의 값을 부모 요소에게로 전달해주는 역할을 하는 함수

// iframe.js

function sendParent(element) {
    parentElement = window.parent.document.getElementById("textField");
    parentElement.textContent = element.textContent;
}

확인

테스트 파일을 확인해보기 전에...

이 페이지를 만약 로컬에서 html 파일로 만들고 브라우저에서 간단히 확인하려는 사람이 있다면 멈추자.

이는 브라우저의 동일 출처 정책을 위반하여 정상적인 기능 수행을 하지 못한다.

다음과 같은 에러가 출력될 것이다.

Uncaught DOMException:
Failed to read a named property 'document' from 'Window':
Blocked a frame with origin "null" from accessing a cross-origin frame.