웹마스터 팁
문서에 따른 아이프레임 heigh(높이) 값 자동 조절 (수정본)
2004.07.31 21:38
예전에 행복한 고니 님이
올려 주신 팁에 문제가 있어 이렇게..수정하여 다시 올립니다.
일단.,.,이렇게 유익한 소스를 올려 주신 고니님께 감사 드립니다.
먼저..소스의 사용 방법에 대해 알려 드리겠습니다.
소스는 아이프레임이 삽입되어 있는 문서에 넣는것이 아니라는걸
알려 드리고 싶습니다..
소스는 아이프레임의 대상이 되는..즉, 아이프레임에 보여지는 문서에
삽입 해야 하는 겁니다.
일단은..
아이프레임의 대상이 되는 문서
<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' 와 같은 이름이 써져 있어야 하는 것!!
잘 아시겠죠?
그럼 끝!!
한번 확인 해 보세요~^^;
행복한고니 님의 소스에서 수정 된 소스는
window.onload = new Function("resizeFrame('333innerFrame333'+ ');" + oldFn);
바로 이 부분 입니다.
리사이즈 프레임의 아이디 설정 부분에 '' 가 빠져 있었군요..
행복한고니 님의 게시물 코멘트로 수정본 올려 드리려 했는데..
워낙 오래 된 게시물이라T^T
아무튼..게시물만 낭비한 것 죄송 합니다.
그럼 항상 행복한 하루 되시구요~
더운 여름~ 피서 잘 다녀 오세요..
ㅃㄴㅃㄴ
올려 주신 팁에 문제가 있어 이렇게..수정하여 다시 올립니다.
일단.,.,이렇게 유익한 소스를 올려 주신 고니님께 감사 드립니다.
먼저..소스의 사용 방법에 대해 알려 드리겠습니다.
소스는 아이프레임이 삽입되어 있는 문서에 넣는것이 아니라는걸
알려 드리고 싶습니다..
소스는 아이프레임의 대상이 되는..즉, 아이프레임에 보여지는 문서에
삽입 해야 하는 겁니다.
일단은..
아이프레임의 대상이 되는 문서
<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' 와 같은 이름이 써져 있어야 하는 것!!
잘 아시겠죠?
그럼 끝!!
한번 확인 해 보세요~^^;
행복한고니 님의 소스에서 수정 된 소스는
window.onload = new Function("resizeFrame('333innerFrame333'+ ');" + oldFn);
바로 이 부분 입니다.
리사이즈 프레임의 아이디 설정 부분에 '' 가 빠져 있었군요..
행복한고니 님의 게시물 코멘트로 수정본 올려 드리려 했는데..
워낙 오래 된 게시물이라T^T
아무튼..게시물만 낭비한 것 죄송 합니다.
그럼 항상 행복한 하루 되시구요~
더운 여름~ 피서 잘 다녀 오세요..
ㅃㄴㅃㄴ
댓글 3
-
량규
2004.08.05 16:47
문서가 아니라 게시판일때는 어떻게 하죠? -
스토비━ⓒ
2004.10.13 12:53
량규//
zboard.php 파일을 열어
아이프레임의 대상이 되는 문서
<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>
이 소스를 삽입 해 줍니다.
그런 다음에 아이프레임이 적용되는 페이지에
<iframe src="보여질주소" id="333innerFrame333" name="333innerFrame333"></iframe>
이렇게,,삽입 합니다.
여기서 눈치 채신 분이 있을걸로 아는데요^^;
잘 보면 "333innerFrame333" 가 있죠?^^
"333innerFrame333" <- 이것은 아까 두번째 소스중
window.onload = new Function("resizeFrame('333innerFrame333');" + oldFn);
를 넣어주면 됩니다. -
쪼이~
2004.10.18 23:35
오오오..진짜 됩니다..감쏴..감쏴..
