아이프레임 자동 높이 #1
- IE에서 오류남, 크롬 작동
html
<iframe width="100%" height="100%" src="./adm_stu001_resume3_list.html" scrolling="no" id="iframe3" onload="autoResize('iframe3')" frameborder="0" class="ifr"></iframe>
js
/* iframe 높이 재설정
* iframe 태그보다 먼저 선언되어야 실행됨. 그래서 head 안에 js 파일을 삽입함.
* */
function autoResize(id){
var newheight;
// var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
//newwidth=document.getElementById(id).contentWindow.document.body.scrollWidth;
//newwidth=document.getElementById(id).contentWindow.document.html.offsetWidth;
}
document.getElementById(id).height=(newheight) + "px";
// document.getElementById(id).width=(newwidth) + "px";
}
아이프레임 자동 높이 #2
- IE11(X)
- 출처 : http://rocabilly.tistory.com/110
$(function () { $('.ifr').load(function () { var iframeContentWindow = this.contentWindow; var height = iframeContentWindow.$(document).height(); this.style.height = height + 'px'; }); });
아이프레임 자동 높이 #3
- IE11 (O), Chrome(O)
- 출처 : http://rocabilly.tistory.com/110
- 사용방법 : iframe의 id값을 적어줘야 한다.
js
function resizeTopIframe(dynheight) { document.getElementById("iframe").height = parseInt(dynheight) + 10; } ///////////////////////////////////////////////////////////////////////////////////// // 자식 페이지 // 등록 후 리프레시 되면 자식 페이지 크기를 부모페이지에 넣어준다 ///////////////////////////////////////////////////////////////////////////////////// function callResize() { var height = document.body.scrollHeight; parent.resizeTopIframe(height); } window.onload =callResize;
아이프레임 자동높이 #4 [추천]
지원 : IE, 크롬 모두 지원됨.
출처 : http://heavening.tistory.com/archive/20130402
사용방법 : 제이쿼리를 사용
$(function() { $('iframe').load(function() { $(this).css("height", $(this).contents().find("body").height() + "px"); }); });