jquery 자식 페이지에서 부모 프레임 높이 알기

 

 

 

jQuery를 사용해 자식 페이지(iframe 내부)에서 부모 프레임(iframe을 포함하는 페이지)의 높이를 알아내려면 window.parent 객체를 활용해야 합니다. 하지만 이 작업은 동일 출처 정책(Same-Origin Policy)을 준수해야 합니다. 즉 자식과 부모가 동일한 도메인, 프로토콜, 포트일 때만 가능합니다.

---

 

기본 코드

// iframe 내부에서 부모 프레임의 높이를 가져오는 코드
$(document).ready(function () {
  var parentHeight = $(window.parent.document).height(); // 부모 페이지 높이
  console.log("부모 프레임 높이: " + parentHeight + "px");
});

---

 

단계별 설명

1. window.parent 객체 접근
   • window.parent는 부모 창(iframe을 포함하는 페이지)의 window 객체를 참조합니다.
2. 부모의 DOM 접근
   • $(window.parent.document)를 사용해 부모 페이지의 DOM에 접근합니다.
3. 높이 계산
   • $(window.parent.document).height()를 호출하여 부모 프레임의 전체 높이를 가져옵니다.

---

 

특정 부모 요소의 높이 가져오기

부모 페이지에서 특정 요소(예: div#container)의 높이를 가져오고 싶다면 아래와 같이 코드를 작성합니다.

$(document).ready(function () {
  var parentElementHeight = $(window.parent.document).find("#container").height();
  console.log("부모의 #container 높이: " + parentElementHeight + "px");
});

---

동일 출처 정책 문제 해결

만약 자식과 부모가 다른 도메인에 있다면 window.parent를 통해 부모 페이지에 접근할 수 없습니다. 이런 경우 다음과 같은 방법을 사용할 수 있습니다.

1. PostMessage API 활용
   • 부모와 자식 간 메시지를 주고받는 방식입니다.

 

부모 페이지 코드

// 메시지를 수신하는 이벤트 핸들러
window.addEventListener("message", function (event) {
  if (event.origin !== "자식 페이지의 도메인") return; // 도메인 확인
  if (event.data === "getParentHeight") {
    // 부모 높이를 자식에게 전송
    var parentHeight = document.documentElement.scrollHeight;
    event.source.postMessage({ parentHeight: parentHeight }, event.origin);
  }
});

 

자식 페이지 코드

// 부모에게 높이를 요청
window.parent.postMessage("getParentHeight", "부모 페이지의 도메인");

// 부모로부터 메시지 수신
window.addEventListener("message", function (event) {
  if (event.origin !== "부모 페이지의 도메인") return; // 도메인 확인
  if (event.data.parentHeight) {
    console.log("부모 프레임 높이: " + event.data.parentHeight + "px");
  }
});

---

 

요약

• 동일 출처: $(window.parent.document).height()로 부모 높이를 가져올 수 있습니다.
• 다른 출처: PostMessage API를 사용하여 부모와 자식 간 통신을 설정해야 합니다.
• 보안을 위해 도메인을 항상 검증하는 것이 중요합니다.

 

 

 

 

 

 

 

#jquery #부모프레임높이알기