아이프레임(iframe) 창 크기 내용에따라 변하게 하기 > 기술자료 | 해피정닷컴

아이프레임(iframe) 창 크기 내용에따라 변하게 하기 > 기술자료

본문 바로가기

사이트 내 전체검색

아이프레임(iframe) 창 크기 내용에따라 변하게 하기 > 기술자료

HTML 아이프레임(iframe) 창 크기 내용에따라 변하게 하기

페이지 정보


본문

[ 방법1 ]
적용가능 : IE 6 , IE 7
1. 넓이값과 높이값을 자동으로 해석하도록 하기
<script language="JavaScript" type="text/javascript">
<!--
function resizeFrame(iframeObj){
    var innerBody = iframeObj.contentWindow.document.body;
    var innerHeight = innerBody.scrollHeight + (innerBody.offsetHeight - innerBody.clientHeight);
    var innerWidth = innerBody.scrollWidth + (innerBody.offsetWidth - innerBody.clientWidth);
    iframeObj.style.height = innerHeight;
    iframeObj.style.width = innerWidth;
}
-->
</script>

<iframe src="filename.html" name="iframe1" frameborder="0" scrolling="no" onload="resizeFrame(this)"></iframe>

2. ㅤ넓이값은 고정하고, 높이값만 변동시키기
<script language="JavaScript" type="text/javascript">
<!--
function resizeFrame(iframeObj){
    var innerBody = iframeObj.contentWindow.document.body;
    var innerHeight = innerBody.scrollHeight + (innerBody.offsetHeight - innerBody.clientHeight);
    iframeObj.style.height = innerHeight;
}
-->
</script>

<iframe src="filename.html" width="넓이값" name="iframe_happyjung" frameborder="0" scrolling="no" onload="resizeFrame(this)"></iframe>


[ 방법2 ]
적용가능 : IE10
<script language="JavaScript" type="text/javascript">
<!--
function init(){
    var doc = document.getElementById('ifrm');
    if(doc.offsetHeight == 0){
    } else {
        pageheight = doc.offsetHeight;
        parent.document.getElementById("contentFrame").height = pageheight+"px";
    }
}
window.onload = function(){
    init();
}
-->
</script>
<div id="ifrm">
<iframe src="해피정닷컴.php" name="iframe" width="100%" frameborder="0" id="contentFrame"></iframe>
</div>


[ 방법3 ]
적용가능 : IE11 , Edge , Chrome 48 , Safari 5 , Firefox 44
<iframe src="해피정닷컴.php" name="iframe" width="100%" frameborder="0" scrolling="no" id="contentFrame"></iframe>

<script type="text/javascript">
function resize_frame(id) {
    var frm = document.getElementById("contentFrame");
    function resize() {
        frm.style.height = "auto"; // set default height for Opera
        contentHeight = frm.contentWindow.document.documentElement.scrollHeight;
        frm.style.height = contentHeight + 0 + "px"; // 23px for IE7
    }
    if (frm.addEventListener) {
        frm.addEventListener('load', resize, false);
    } else {
        frm.attachEvent('onload', resize);
    }
}
resize_frame('contentFrame');
</script>


[ 방법4 ]

<style>
.iframe100 {
  display: block;
  border: none;
  /*border:1px solid #cccccc;*/
  height: 100vh;
  width: 100vw;
}
</style>

<iframe name="iframe" class="iframe100" src="해피정닷컴.php"></iframe>



참고자료
http://limboy.tistory.com/39 
http://maen2001.tistory.com/36 
https://dgkim5360.tistory.com/entry/adjusting-iframe-height-100-precent 

댓글목록

등록된 댓글이 없습니다.


Total 2,641건 130 페이지
  • RSS
기술자료 목록
열람
HTML   23479  2006-03-04 14:54 ~ 2020-10-11 18:21  
60
제로보드   23326  2006-03-03 05:22  
59
HTML   15462  2006-03-02 21:35 ~ 2008-01-28 00:00  
58
HTML   16465  2006-02-11 11:18 ~ 2017-03-29 00:00  
57
JavaScript   12044  2006-02-11 11:10  
56
JavaScript   12940  2006-02-11 11:06  
55
JavaScript   13569  2006-01-25 20:30 ~ 2006-07-13 00:00  
54
JavaScript   13987  2006-01-24 21:54  
53
HTML   19841  2005-12-27 18:34 ~ 2015-08-05 00:00  
52
메이크샵   11828  2005-12-26 18:35  
51
제로보드   14259  2005-12-01 18:36 ~ 2018-06-14 18:43  
50
제로보드   13635  2005-11-09 15:17  
49
제로보드   16191  2005-11-09 09:50  
48
JavaScript   15663  2005-11-09 09:21 ~ 2006-11-10 00:00  
47
JavaScript   20112  2005-11-04 10:26 ~ 2018-07-17 21:36  
46
PHP   12511  2005-09-13 08:38  
45
일반   14249  2005-09-12 13:25  
44
호스팅   19318  2005-03-30 12:06  
43
도메인   20586  2004-09-08 12:13  
42
일반   14993  2004-09-08 12:13  

검색

해피정닷컴 정보

회사소개 회사연혁 협력사 오시는길 서비스 이용약관 개인정보 처리방침

회사명: 해피정닷컴   대표: 정창용   전화: 070-7600-3500   팩스: 042-670-8272
주소: (34368) 대전시 대덕구 대화로 160 대전산업용재유통단지 1동 222호
개인정보보호책임자: 정창용   사업자번호: 119-05-36414
통신판매업신고: 제2024-대전대덕-0405호 [사업자등록확인]  
Copyright 2001~2024 해피정닷컴. All Rights Reserved.