iframe 높이 구하기

1. 도메인 같을 경우

부모 html

---

<p id="parent">부모</p>
<iframe id="ifr" src="child.html" onload="calcHeight()"></iframe>

---

부모 script

---

function calcHeight() {
	var ifr_plcy_height = document.getElementById('ifr').contentWindow.document.body.scrollHeight;
	document.getElementById('ifr').height = ifr_plcy_height;
	document.getElementById('ifr').style.overflow = "hidden";
}

---

자식html의 body에 접근하기 위해 위해서 contentWindow 사용

 

자식 html

---

<p id="child" style="background: red; height: 500px;">자식</p>

---

주의점

이 경우에는 부모 html 과 자식 html이 같은 프로토콜, 도메인, 포트를 가져야 가능합니다.(동일 출처 정책)

 

2. 도메인이 다를경우

 

window.postMessage 사용

부모 html

---

<p id="parent">부모</p>
<iframe id="ifr" src="child.html"></iframe>

---

부모 script

 

---

window.onload = function() {
	window.addEventListener("message", function(e) {
		document.getElementById("ifr").height = e.data.scrollHeight;
	});
};

---

message 이벤트 리스너를 등록해준 다음

자식html에서 전달받은 data를 통해서 높이를 구합니다.

 

자식 html

---

<p id="child" style="background: red; height: 500px;">자식</p>

---

 

자식 script

---

window.onload = function() {
	var scrollHeight = document.getElementById("body").scrollHeight;
	window.parent.postMessage({"scrollHeight" : scrollHeight }, '*');
};

---

postMessage 를 통해 JSON 형식으로 데이터를 부모 html에 전달할 수 있습니다.

두번째 인자는 도메인 주소인데 *로 설정하면 모든 도메인을 허용하는 것이고 해당 부모 도메인 주소를 입력해주시면 됩니다.