그누보드 아이프레임 삽입시 높이 자동 조절 jQuery 질문있습니다. 채택완료
배짱킴
11년 전
조회 7,525
/* 아이프레임 높이 변화 */
function iframeHeight() {
//아이프레임 안쪽 페이지 높이를 먼저구하신후
var the_height = document.getElementById('iframe-board').contentWindow.document.getElementById('body-height').scrollHeight;
// 아이프레임 높이를 바꿔주시면 됩니다.
document.getElementById('iframe-board').height = the_height;
$(document).scrollTop(0);
}
이렇게 헤더 부분에 넣으면 되는지?
아이프레임 높이는 어디 부분에서 바꾸는지 알고 싶습니다.
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
11년 전
주석달아드릴께요
</p><p><span style="font-family: gulim, helvetica; line-height: 23.54400062561035px; background-color: rgb(255, 255, 255);"><script type="text/javascript"></span></p><p style="line-height: 23.54400062561035px; word-break: break-all; font-family: gulim, helvetica; background-color: rgb(255, 255, 255);">/* 아이프레임 높이 변화 */</p><p style="line-height: 23.54400062561035px; word-break: break-all; font-family: gulim, helvetica; background-color: rgb(255, 255, 255);">function iframeHeight() { //iframeHeight라는 펑션명</p><p style="line-height: 23.54400062561035px; word-break: break-all; font-family: gulim, helvetica; background-color: rgb(255, 255, 255);"><span class="Apple-tab-span" style="white-space: pre;"> </span>//아이프레임 안쪽 페이지 높이를 먼저구하신후</p><p style="line-height: 23.54400062561035px; word-break: break-all; font-family: gulim, helvetica; background-color: rgb(255, 255, 255);"><span class="Apple-tab-span" style="white-space: pre;"> </span>var the_height = document.getElementById('iframe-board').contentWindow.document.getElementById('body-height').scrollHeight;</p><p style="line-height: 23.54400062561035px; word-break: break-all; font-family: gulim, helvetica; background-color: rgb(255, 255, 255);">//id값이 iframe-board인것의 내부 컨텐츠의 body-height가 갖는 스크롤높이값을 the_height에 저장</p><p style="line-height: 23.54400062561035px; word-break: break-all; font-family: gulim, helvetica; background-color: rgb(255, 255, 255);">//이거는 iframe안의 body-height라는 아이디에 높이값을 지정해줘야 불러올수 있는거에요.</p><p style="line-height: 23.54400062561035px; word-break: break-all; font-family: gulim, helvetica; background-color: rgb(255, 255, 255);"> </p><p style="line-height: 23.54400062561035px; word-break: break-all; font-family: gulim, helvetica; background-color: rgb(255, 255, 255);"> </p><p style="line-height: 23.54400062561035px; word-break: break-all; font-family: gulim, helvetica; background-color: rgb(255, 255, 255);"><span class="Apple-tab-span" style="white-space: pre;"> </span>// 아이프레임 높이를 바꿔주시면 됩니다.</p><p style="line-height: 23.54400062561035px; word-break: break-all; font-family: gulim, helvetica; background-color: rgb(255, 255, 255);"><span class="Apple-tab-span" style="white-space: pre;"> </span>document.getElementById('iframe-board').height = the_height;</p><p style="line-height: 23.54400062561035px; word-break: break-all; font-family: gulim, helvetica; background-color: rgb(255, 255, 255);">//아이디가 iframe-board인 것의 높이를 the_height로 바꾼다 라는거고요.</p><p style="line-height: 23.54400062561035px; word-break: break-all; font-family: gulim, helvetica; background-color: rgb(255, 255, 255);"> </p><p style="line-height: 23.54400062561035px; word-break: break-all; font-family: gulim, helvetica; background-color: rgb(255, 255, 255);"><span class="Apple-tab-span" style="white-space: pre;"> </span>$(document).scrollTop(0);//현재 페이지의 0으로 스크롤을 올린다에요. 이건 높이가 길어진 아이프레임을 표현할때 스크롤 내려가는 상황을 방지하는거같네요.</p><p style="line-height: 23.54400062561035px; word-break: break-all; font-family: gulim, helvetica; background-color: rgb(255, 255, 255);">}</p><p style="line-height: 23.54400062561035px; word-break: break-all; font-family: gulim, helvetica; background-color: rgb(255, 255, 255);">$(document).onload(function(){</p><p style="line-height: 23.54400062561035px; word-break: break-all; font-family: gulim, helvetica; margin-left: 40px; background-color: rgb(255, 255, 255);">iframeHeight();</p><p style="line-height: 23.54400062561035px; word-break: break-all; font-family: gulim, helvetica; background-color: rgb(255, 255, 255);">});</p><p><span style="font-family: gulim, helvetica; line-height: 23.54400062561035px; background-color: rgb(255, 255, 255);"></script> </span> </p><p><span style="font-family: gulim, helvetica; line-height: 23.54400062561035px; background-color: rgb(255, 255, 255);">
해당 스크립트는 어디에 넣어도 상관없어요. 하지만 iframeHeight()만 실행으로 넣으신다면 iframe아래에 넣어주셔야하고요. 윈도우온로드같은 페이지를 모두 읽고나서 펑션을 적용하는 방식을 사용하신다면 어디에 넣어도 상관없어요.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
배짱킴
11년 전
감사합니다. 그런대 iframeHeight()만 실행으로 넣는다는 말과 평선을 적용하는 방식 이 뭔지 잘모르겠네요 ㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인