아이프레임 표에 맞게 리사이즈아이프레임 표에 맞게 리사이즈
페이지 정보
작성자 MintState 댓글 0건 조회 12,933회 작성일 08-10-29 20:37본문
아이프레임 표에 맞게 리사이즈
아이프레임 페이지의 사이즈에 맞게.. 높이가 조정 됩니다.
아이프레임은 요즘 브라우저들은 거의 지원하고 있으나 예전버전의 브라우저는 지원하지 않는 것도 있습니다.
또한 이 소스는 인터넷 환경이 늦을 경우 동작을 하지 않는 경우 도 있습니다.
따로 아이프레임 페이지를 링크 시켜주는 메너가 필요 하겠죠
* 다른 방법 (비슷 합니다.)
* 다른 방법
추가.. 다른 방법...
<head> 와 </head> 사이에
이 소스를 삽입 합니다..참고로 이 소스에서는 다른 수정이나, 설정 작업은
필요 없습니다.
그냥 이 원본 그대로 삽입 해 주세요..
그런 다음에..
<body> 와 </body> 사이 가장 마지막 줄에
이 소스를 삽입 해 줍니다.
여기서! '333innerFrame333' 이 부분을 넣고 싶은 이름으로 넣습니다.
그럼 아이프레임 대상 문서에는 모두 소스 작업이 끝난 것입니다.
음..
그런데..한가지 중요한 사실..
아이프레임에 보여질 페이지는 모두 상단의 소스가 삽입되어 있어야 합니다.
모두모두~
그런 다음에..
아이프레임을 넣을 곳에 하단의 소스를 삽입 합니다.
이렇게,,삽입 합니다.
여기서 눈치 채신 분이 있을걸로 아는데요^^;
잘 보면 "333innerFrame333" 가 있죠?^^
"333innerFrame333" <- 이것은 아까 두번째 소스중
window.onload = new Function("resizeFrame('333innerFrame333');" + oldFn);
이 부분의 '333innerFrame333' 와 같은 이름이 써져 있어야 하는 것!!
아이프레임 페이지의 사이즈에 맞게.. 높이가 조정 됩니다.
아이프레임은 요즘 브라우저들은 거의 지원하고 있으나 예전버전의 브라우저는 지원하지 않는 것도 있습니다.
또한 이 소스는 인터넷 환경이 늦을 경우 동작을 하지 않는 경우 도 있습니다.
따로 아이프레임 페이지를 링크 시켜주는 메너가 필요 하겠죠
<script>
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 frameborder=0 width=540 src=주소 onload="resizeFrame(this)"></iframe>
* 다른 방법 (비슷 합니다.)
<SCRIPT LANGUAGE="JavaScript">
<!--
function resizeHeight(fr) {
fr = typeof fr == 'string' ? document.getElementById(fr) : fr;
fr.setExpression('height',aaa.document.body.scrollHeight);
fr.setExpression('width',aaa.document.body.scrollWidth);
}
//-->
</SCRIPT>
<iframe frameborder="0" id="aaa" scrolling="no" src="./main.htm" onload="resizeHeight(this)"></iframe>
* 다른 방법
<script>
window.onload = function() {
resizeTo(560,document.body.scrollHeight+10);
}
window.scrollTo(0,0);
</script>
<div id=centerLayer style=position:absolute;><div id=boardLayer style=position:absolute;top:0px;left:0px;><iframe src="주소" border=no frameborder=0 topmargin=0 leftmargin=0 width=560 height=10000 scrolling=no></iframe></div></div>
추가.. 다른 방법...
<head> 와 </head> 사이에
<script>
function resizeFrame(name){
var oBody = document.body;
var oFrame = parent.document.all(name);
var min_height = 320; //iframe의 최소높이(너무 작아지는 걸 막기위함, 픽셀단위, 편집가능)
var min_width = 465; //iframe의 최소너비
var i_height = oBody.scrollHeight + (oBody.offsetHeight-oBody.clientHeight);
var i_width = oBody.scrollWidth + (oBody.offsetWidth-oBody.clientWidth);
if(i_height < min_height) i_height = min_height;
if(i_width < min_width) i_width = min_width;
oFrame.style.height = i_height;
oFrame.style.width = i_width;
parent.scrollTo(1,1); //부모문서의 스크롤 위치를 1, 1로 옮긴다.(오감도님이 지적해주셨어요~^^)
}
</script>
이 소스를 삽입 합니다..참고로 이 소스에서는 다른 수정이나, 설정 작업은
필요 없습니다.
그냥 이 원본 그대로 삽입 해 주세요..
그런 다음에..
<body> 와 </body> 사이 가장 마지막 줄에
<script>
var oldFn = "";
if(window.onload != null){
oldFn = new String(window.onload); //window.onload의 함수를 문자열로 받는다
oldFn = oldFn.substring(22,oldFn.length-2);
}
window.onload = new Function("resizeFrame('333innerFrame333');" + oldFn); //새함수와 기존의 함수를 추가해서 onload이벤트에 할당
</script>
이 소스를 삽입 해 줍니다.
여기서! '333innerFrame333' 이 부분을 넣고 싶은 이름으로 넣습니다.
그럼 아이프레임 대상 문서에는 모두 소스 작업이 끝난 것입니다.
음..
그런데..한가지 중요한 사실..
아이프레임에 보여질 페이지는 모두 상단의 소스가 삽입되어 있어야 합니다.
모두모두~
그런 다음에..
아이프레임을 넣을 곳에 하단의 소스를 삽입 합니다.
<iframe src="보여질주소" id="333innerFrame333" name="333innerFrame333"></iframe>
이렇게,,삽입 합니다.
여기서 눈치 채신 분이 있을걸로 아는데요^^;
잘 보면 "333innerFrame333" 가 있죠?^^
"333innerFrame333" <- 이것은 아까 두번째 소스중
window.onload = new Function("resizeFrame('333innerFrame333');" + oldFn);
이 부분의 '333innerFrame333' 와 같은 이름이 써져 있어야 하는 것!!
|
|
댓글목록
등록된 댓글이 없습니다.
