iframe 로드 종료후 페이지 크기 변경될때 높이조정 하는방법 부탁드립니다.
본문
append 함수를 사용해서 레이아웃이 늘어낫는데
iframe 크기는 처음 문서 크기에 맞도록 되어있어서 iframe 크기를 다시 변경하려고 5시간동안
구글링만하다가.. 여기에 질문 남겨봅니다..
페이지 로드 후
var iFrames = $('#mainFrame');
if ($.browser.safari || $.browser.opera) {
iFrames.load(function(){
setTimeout(iResize(iFrames), 0);
});
for (var i = 0, j = iFrames.length; i < j; i++) {
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
} else {
iFrames.load(function() {
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
});
}
위 코드를 써서 문서에 맞도록 아이프레임 조절해줬거든요..,
append 함수 등으로 레이아웃이나 페이지 크기 변화가 있을 시 bind 함수나 add리스너 함수
여러가지 함수로 별짓 다해봤습니다.
도움부탁드리겠습니다..
감사합니다..
답변 3
$('#iframe_test').load(function() {
$(this).height($(this).contents().find('body')[0].scrollHeight+30);
});
</script>
답변감사합니다.! iframe 로드 끝난 후 페이지 크기가 변경될때는 다시 리사이즈가 힘든가요? 흠...
감사합니다... 계속 삽질 중이었는데, 한 방에 성공했습니다~!
저도 애 먹었던 것인데요~
스크립트 이것저것 한 20-30개 정도를 적용하여 보았는데 결국 해결을 하였습니다.
확인해본 결과 ie, ff, 크롬에서 작동이 잘 되었습니다.
<!-- 아이프레임 창 높이 조절 소스 -->
<script type="text/javascript">
function resizeFrame(frm) {
frm.style.height = "auto";
contentHeight = frm.contentWindow.document.body.scrollHeight;
frm.style.height = contentHeight + 4 + "px";
}
</script>
<!-- 아이프레임 조절 끝 -->
<!--- 삽입 주소 시작 --->
<iframe src="나타내야할 주소" onload=resizeFrame(this) scrolling="no" frameborder="0" width="840" height="1000"></iframe>
<!--- 삽입 주소 끝 --->
그대로 넣으십시오~
height="1000"은 그대로 넣으시고 width만 알맞게 손을 보십시오~
고무줄처럼 잘 늘어나고 잘 줄어듭니다.
아이프레임은 가급적 사용하지 않는 것이 좋지만 그래도 필요한 곳이 있지요~ㅎ
저도 여기서 많은 도움을 받고 있습니다.
늘 감사하지요~
그럼 성공하시기를...^^)