[iframe] 부모 페이지와 자식 iframe간 데이터 접근 및 조작

※ 메모 목적으로 작성한 글

 

개발 중, iframe을 JSP에 탑재하고 iframe 내에서 상위 JSP로, JSP에서 iframe으로 서로의 데이터에 접근하고,

조작해야 할 일이 생겼다.

 

이에 대한 해결 방법을 구글링해보니, 다음과 같이 접근이 가능하다고 한다.

 

(물론 이 방법으로 해결하지는 못 했다. 나의 경우 JSP는 스프링이고, IFrame은 Node.js에서 구동하는 페이지이기 때문에 CORS가 발생... ㅎㅋㅎㅋ... 해결 방법은 다음 포스트에 작성한다. 내 경우가 아닌 간단한 형태라면 하단의 방법으로 사용할 수 있을 것이다.)

 

1. iframe 내에서 상위 JSP(또는 HTML)로 데이터 접근 및 조작

iframe에서 상위 JSP로 데이터를 보내기 위해서는 iframe(자식)에서 부모 윈도우를 소환하는

자바스크립트 명령어를 사용하면 된다.

 

이때 parent 라는 명령어를 통해 부모 윈도우로 접근이 가능하다.

 

가령, 다음과 같이 부모 JSP 내에 test라는 변수가 있다고 가정해보자.

// 생략

<iframe src="/views/iframe.html"></iframe>

// 부모 JSP(또는 HTML)에 위치한 변수
<script>
	let test;
</script>

// 생략

 

이때 자식 iframe 내에서 부모의 test 변수에 접근하기 위해서는 다음과 같이 작성한다.

// 자식 iframe
<script>
  // 부모의 test 변수에 접근한다.
  console.log( parent.test )

  // 결과: undefined
</script>

당연하지만, undefined가 출력된다. 부모 JSP의 변수 test는 아무런 값을 가지고 있지 않기 때문이다.

 

그러면 이번에는 부모 변수의 값을 조작해보자.

 

자식 iframe에 다음과 같이 작성한다.

// 자식 iframe
<script>
  // 부모의 test 변수에 접근한 후, 값을 변경한다.
  parent.test = 100;
  console.log( parent.test );

  // 결과: 100
</script>

부모 JSP의 변수 test의 값이 100으로 변경되었다.

 

변수 뿐만이 아니라 부모 페이지의 함수도 호출이 가능하다.

// 부모 JSP(또는 HTML)
<script>
  let test;

  // iframe에서 접근하여 호출할 함수 정의
  function testFunc() {
    console.log("===>testFunc() 호출!");
    return "success!";
  }
</script>

// 자식 iframe
<script>
  console.log( parent.testFunc() );
    
  // 결과: "success"
</script>

역시 동일하게 parent로 접근해서 부모가 지닌 함수를 호출하면 된다. (인자값도 함께 보낼 수 있다.)

 

2. 상위 JSP(또는 HTML)에서 iframe로 데이터 접근 및 조작

이번에는 반대의 경우이다. 부모인 JSP에서 iframe이 지닌 데이터에 접근하고, 값을 변경할 수 있다.

위와 동일하게 자식 iframe의 함수에도 접근할 수 있다.

 

다만, 상단에서는 parent를 통해 부모 윈도우를 얻어서 제어하였지만, 부모에서 자식에게 접근하는 경우는

조금 다르다.

 

가장 먼저, 자식 윈도우(iframe)를 얻어낸 후, 변수 혹은 함수에 접근해야 한다.

 

자식 윈도우를 얻고, 접근하고 값을 제어하는 방법은 다음과 같다.

// 자식 iframe
<script>
	let childTest;
</script>

...생략

<!-- 1. iframe에 id 지정 -->
<iframe id="child" src="/views/iframe.html"></iframe>

<script>
  // 2. 자식 윈도우에 접근한다.
  let childWindow = document.getElementById("child").contentWindow;

  // 3. 자식 윈도우가 지닌 데이터 접근
  console.log( child.childTest );
  // 출력 : undefined

  // 4. 자식 윈도우가 지닌 데이터 변경 및 출력
  child.childTest = 200;
  console.log( child.childTest )
  // 출력 : 200
</script>

1. 자바스크립트에서 iframe 윈도우에 접근할 수 있도록 iframe 태그에 id를 "child"로 지정해주었다.

 

2. 자바스크립트 단에서는 해당 iframe에 대한 정보를 얻어낸 후,  contentWindow를 통해 자식 윈도우를 얻어낸다.

 

3. 그 이후부터는 1번 항목에서 다룬 자식에서 부모 윈도우에 접근하는 것과 동일하게 사용할 수 있다. 여기에서는 자식 페이지가 지닌 childTest에 접근하여 값을 출력해본다. 자식 페이지에서는 변수를 선언만하고 초기화 하지 않았으므로 undefined가 출력된다.

 

4. 자식 윈도우에 접근하여 값을 200으로 지정하였다. 그 결과로 출력은 200이 나온다.

 

3. 마무리

다음 포스팅에서는 동일하게 자식에서 부모, 부모에서 자식 데이터로 접근하는 방법에 대해 다룰건데,

이때 부모는 다른 도메인에서 동작하는 서버, 그리고 자식 iframe도 다른 도메인에서 동작하는 서버일 때 부모와 자식 두 영역에서 데이터를 주고 받는 방법에 대해 포스팅 할 것이다.

 

끗