인터넷정보

문서길이를 자동으로 맞추는 아이프레임 리사이즈 소스 6가지

알 수 없는 사용자 2007. 10. 18. 13:41
1.
아래 스크립트는 iframe에 들어갈 파일을 건드리지않아도 됩니다.
객체에 대한 read/write권한을 위해서 같은 계정내의 파일이기만 하면 됩니다.
<script>
function doResize()
{
container.height = myframe.document.body.scrollHeight;
container.width = myframe.document.body.scrollWidth;
}
</script>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="container"><iframe src="your_file.html" name="myframe" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="no" onload="doResize()"></iframe></td>
</tr>
</table>

iframe에 들어갈 파일의 로딩이 완료되는 순간 doResize() 함수를 호출하여 iframe을 포함하는 TD태그의 width와 height를 강제로 바꿔줍니다.
Windows 2000, IE 6. 에서는 잘 보이는데 다른 환경에서는 어떨런지 모르겠네요 :)

2.
<script Language='javascript'>
function reSize() {
        try{
        var objBody = ifrm.document.body;
        var objFrame = document.all["ifrm"];
        ifrmHeight = objBody.scrollHeight + (objBody.offsetHeight - objBody.clientHeight);
       
        if (ifrmHeight > 300) {
                objFrame.style.height = ifrmHeight
        }else{
                objFrame.style.height = 300;
        }
        objFrame.style.width = '100%'
        }catch(e){}
}
function init_iframe() {
        reSize();
        setTimeout('init_iframe()',200)
}
init_iframe();
</script>
그리고.... 아이프레임은 다음과 같이
id를 지정해주면 됩니다.
<iframe id='ifrm' ........>

3.
<iframe src=1.html name=myframe width=100% marginwidth=0 marginheight=0 frameborder=no></iframe>

iframe에 포함될 1.html 파일은

<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 onload="top.document.all.myframe.height = document.body.scrollHeight">
내용
</body>


4.
<script>
function initsize() {
self.resizeTo(document.body.scrollWidth, document.body.scrollHeight);
}
</script>
<body onLoad="initsize();">

5.
먼저 헤드와 헤드사이에
<script language="JavaScript1.2">
function iframe_reset(){
        dataobj=document.all? document.all.page_content : document.getElementById("page_content")
        
        dataobj.style.top=0
        dataobj.style.left=0

        pagelength=dataobj.offsetHeight
        pagewidth=dataobj.offsetWidth

        parent.document.all.iframe_main.height=pagelength
        parent.document.all.iframe_main.width=pagewidth
}
window.onload=iframe_reset
</script>
이소기를 참가 하세요^^

아이 프레임에...
<iframe id="iframe_main" src="test.html" width=10 height=10 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no></iframe>


6.
제일 간단.
iframe 문서에 삽입
<script>
        if(window != top) {
                self.resizeTo(document.body.scrollWidth, document.body.scrollHeight + 10);
        }
</script>
반응형