아이프레임(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