Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript로 iframe에서 부모 창의 함수 호출하기 – window.top 완벽 가이드

iframe 내부에서 부모 창(parent window)에 정의된 JavaScript 함수를 호출해야 하는 경우가 종종 있습니다. 이럴 때 가장 간단하게 사용할 수 있는 방법이 바로 window.top 객체입니다.

window.top이란?

window.top은 현재 창이 몇 겺의 iframe에 중첩되어 있더라도 항상 최상위 브라우저 창(window)을 참조하는 속성입니다. 따라서 window.top.함수명() 형태로 작성하면 부모 페이지에 정의된 함수를 그대로 실행할 수 있습니다.

기본 사용 예제

아래 코드는 iframe 안에서 링크를 클릭했을 때, 부모 창에 정의된 display() 함수를 호출하여 알림창을 띄우는 예제입니다.

<!DOCTYPE html>
<html>
<body>
  <script>
    function display() {
      alert("Hello World!");
    }
  </script>

  <iframe id="myFrame">
    <a onclick="window.top.display();" href="#">Click</a>
  </iframe>
</body>
</html>

iframe 내부의 <a> 태그를 클릭하면 window.top.display()가 실행되어 부모 문서의 alert("Hello World!")가 호출됩니다.

window.parent와 window.top의 차이

  • window.parent: 바로 한 단계 위의 부모 창을 참조합니다.
  • window.top: 중첩 깊이와 상관없이 가장 바깥쪽(최상위) 창을 참조합니다.

iframe이 여러 겺으로 중첩된 구조라면 두 속성의 결과가 달라질 수 있으므로, 상황에 맞게 선택해서 사용하는 것이 좋습니다.

주의사항 – 동일 출처 정책(Same-Origin Policy)

부모 창과 iframe의 도메인(출처)이 다르면 보안 정책 때문에 window.top으로 부모 함수를 호출하거나 부모 문서에 접근할 수 없습니다. 크로스 도메인 환경에서는 postMessage() API를 사용해 메시지를 주고받는 방식을 권장합니다.

postMessage를 활용한 안전한 통신 예시

// iframe 내부에서
window.top.postMessage("callDisplay", "https://parent-domain.com");

// 부모 창에서
window.addEventListener("message", (event) => {
  if (event.origin !== "https://child-domain.com") return;
  if (event.data === "callDisplay") display();
});