jquery 부모 프레임 높이 제어

 

 

jQuery를 사용하여 부모 프레임(iframe 또는 div 등)의 높이를 제어하려면 다음과 같은 방법을 사용할 수 있습니다. 부모 요소의 높이를 자식 콘텐츠에 맞게 동적으로 변경하거나 특정 높이로 설정하는 경우

---

 

 

1. 부모 요소 높이를 콘텐츠에 맞게 설정

<!-- HTML 구조 -->
<div id="parent" style="border: 1px solid black;">
  <div id="child">
    <p>안녕하세요! 여기는 자식 콘텐츠입니다.</p>
    <p>높이를 조절해 보세요!</p>
  </div>
</div>

 

<!-- HTML 구조 -->
<div id="parent" style="border: 1px solid black;">
  <div id="child">
    <p>안녕하세요! 여기는 자식 콘텐츠입니다.</p>
    <p>높이를 조절해 보세요!</p>
  </div>
</div>

---

 

2. 부모 요소 높이를 특정 값으로 설정

// 특정 높이로 설정 (예: 500px)
$(document).ready(function () {
  $("#parent").height(500);
});

---

 

3. iframe의 부모 높이 조정

만약 iframe 내부에서 부모 프레임(iframe을 포함하는 페이지)의 높이를 제어하려면 다음과 같이 처리할 수 있습니다.

// iframe 내부에서 부모 프레임의 높이를 변경
$(document).ready(function () {
  var iframeContentHeight = $(document).height(); // iframe 내부 콘텐츠 높이
  window.parent.$("#parentFrame").height(iframeContentHeight); // 부모 프레임의 높이 설정
});

 

주의: window.parent를 사용하여 부모 창에 접근하는 경우 동일 출처 정책(Same-Origin Policy)을 준수해야 합니다.

---

 

4. 이벤트 기반으로 높이 동기화

만약 자식 콘텐츠가 동적으로 변경될 수 있다면 높이를 계속 동기화해야 할 수 있습니다.

function updateParentHeight() {
  var childHeight = $("#child").outerHeight(true);
  $("#parent").height(childHeight);
}

// 자식 콘텐츠가 변경될 때마다 실행
$(document).on("contentChanged", function () {
  updateParentHeight();
});

// 초기 높이 설정
$(document).ready(function () {
  updateParentHeight();
});

 

동적 콘텐츠가 추가될 때 $(document).trigger("contentChanged")로 호출하면 높이가 업데이트됩니다.

---

 

요약

• 부모 요소의 높이는 height() 메서드를 사용하여 설정할 수 있습니다.
• 자식 콘텐츠의 높이를 계산하려면 outerHeight(true)를 사용합니다.
• iframe과 부모 간 통신은 window.parent를 통해 가능합니다(동일 출처일 경우)

 

 

 

 

 

 

#jquery #부모프레임제어 #부모프레임높이제어