Hello, World!
이전 목록 다음
채택완료

아이프레임 자동높이

승승승이
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전 1,833

부모파일

Copy 
<iframe src="01.html" id="myiframe" scrolling="no" width="300"></iframe>
<script type="text/javascript">
  let iframe = document.getElementById('myiframe');
  
  window.addEventListener('message', function(e) {
    let message = e.data;
    iframe.style.height = message.height + "px";
  } , false);
</script>
 

 

자식파일 (01.html)

Copy 
<script type="text/javascript">
window.addEventListener('load', function() {
  let message = {height: document.body.scrollHeight};    
  window.top.postMessage(message, "*");
});
</script>
 
<div style="height:500px; background:#ccc;">
<a href="02.html">이동</a>
</div>
 

 

자식파일 (02.html)

Copy 
<script type="text/javascript">
window.addEventListener('load', function() {
  let message = {height: document.body.scrollHeight};    
  window.top.postMessage(message, "*");
});
</script>
 
<div style="height:1500px; background:#555;">
<a href="01.html">이동</a>
</div>
 

 

처음 자동높이는 잘됩니다.

다만 아이프레임 내에서 이동시 높이가 높은 파일로 이동하면 이상이 없는데,

낮은 파일로 이동하면, 높이가 맞춰지지 않습니다.

 

문제가 뭘까요...??;

아이프레임 자동높이
|

답변 1개 / 댓글 2개

채택된 답변
+20 포인트
웹웹메이킹
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전

다음과 같은 방법으로 시도해 볼 수 있을것 같습니다.

Copy 
<!-- 부모 파일 -->
<iframe src="01.html" id="myiframe" scrolling="no" width="300"></iframe>
<script type="text/javascript">
  let iframe = document.getElementById('myiframe');
  
  window.addEventListener('message', function(e) {
    let message = e.data;
    iframe.style.height = message.height + "px";
  } , false);
</script>

<!-- 자식 파일 (01.html) -->
<script type="text/javascript">
window.addEventListener('load', function() {
  let message = {height: Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)};    
  window.top.postMessage(message, "*");
});
</script>

<div style="height:500px; background:#ccc;">
  <a href="02.html">이동</a>
</div>

<!-- 자식 파일 (02.html) -->
<script type="text/javascript">
window.addEventListener('load', function() {
  let message = {height: Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)};    
  window.top.postMessage(message, "*");
});
</script>

<div style="height:1500px; background:#555;">
  <a href="01.html">이동</a>
</div>

답변에 대한 댓글 2개

승승이
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전
말씀하신 것 처럼 해도 02.html 에서 01.html로 다시 돌아가면 높이는 02.html에 맞춰진 상태로 이동하네요..
웹메이킹
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전
다음과 같이 해보시는건 어떨까 합니다.
[code]
<!-- 부모 파일 -->
<iframe src="01.html" id="myiframe" scrolling="no" width="300"></iframe>
<script type="text/javascript">
let iframe = document.getElementById('myiframe');

window.addEventListener('message', function(e) {
let message = e.data;
iframe.style.height = message.height + "px";
} , false);
</script>

<!-- 자식 파일 (01.html) -->
<script type="text/javascript">
window.addEventListener('load', function() {
// 함수를 정의하여 높이를 측정하고 전송
function postHeight() {
let message = { height: Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) };
window.top.postMessage(message, "*");
}

// 페이지 로드시 초기 높이 전송
postHeight();

// a 태그 클릭 시 높이 재측정 및 전송
document.querySelector('a').addEventListener('click', function(e) {
e.preventDefault(); // 기본 이벤트 처리 방지
// 페이지 이동 전에 높이를 다시 측정하고 전송
postHeight();
// 페이지 이동
window.location.href = this.getAttribute('href');
});
});
</script>

<div style="height:500px; background:#ccc;">
<a href="02.html">이동</a>
</div>

<!-- 자식 파일 (02.html) -->
<script type="text/javascript">
window.addEventListener('load', function() {
// 함수를 정의하여 높이를 측정하고 전송
function postHeight() {
let message = { height: Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) };
window.top.postMessage(message, "*");
}

// 페이지 로드시 초기 높이 전송
postHeight();

// a 태그 클릭 시 높이 재측정 및 전송
document.querySelector('a').addEventListener('click', function(e) {
e.preventDefault(); // 기본 이벤트 처리 방지
// 페이지 이동 전에 높이를 다시 측정하고 전송
postHeight();
// 페이지 이동
window.location.href = this.getAttribute('href');
});
});
</script>

<div style="height:1500px; background:#555;">
<a href="01.html">이동</a>
</div>
[/code]

답변을 작성하려면 로그인이 필요합니다.