iframe 내용에 맞게 자동으로 크기 조절하기
iframe을 쓰면 페이지 로딩시간을 줄일 수 있어서 가끔쓰는데,
내용이 넘어버리게 되면 스크롤바가 나타나서 불편하더군요.
세이클럽도 iframe 을 열심히(?)하고 있는 곳인데, 자기네들한테 맞게 만들어진거라 좀 쓰기가 그렇더라구요.
그래서 간편하게 만들어봤습니다.
iframe에 들어가는 문서에 삽입해주셔야 합니다~ *^^*
<script>
// by 행복한고니(e-mail : gonom9 at empal.com, MSN : gonom9 at hotmail.com)
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>
위 함수를 삽입하고, 문서 제일 아래쪽에
<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(FRAMEID);" + oldFn); //새함수와 기존의 함수를 추가해서 onload이벤트에 할당
</script>
를 삽입해주세요. 가끔씩 body에 onLoad 이벤트를 쓰시는 분들이 있는데 그 분들을 위한 함수입니다.
사용하실땐
iframe에 id와 name 속성을 같은 이름으로 할당하셔야 합니다.
예)
<iframe id=innerFrame name=innerFrame></iframe>
<script>
...(생략)
window.onload = newFunction("resizeFrame('innerFrame');" + oldFn);
</script>
예제페이지 : http://ece.uos.ac.kr/~enc/gony/test.html
예제페이지 : http://ece.uos.ac.kr/~enc/gony/test2.html
제로보드 쓰시는 분들은
<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(FRAMEID);" + oldFn); //새함수와 기존의 함수를 추가해서 onload이벤트에 할당
</script>
이 부분을
<script>
var oldFn = new String(window.onload);
window.onload = new Function("resizeFrame(FRAMEID);" + oldFn); //새함수와 기존의 함수를 추가해서 onload이벤트에 할당
</script>
이렇게 바꿔주세요.
다시한번 말씀드리는데 iframe의 내용이 되는 문서에 삽입해주셔야 합니다.
그럼 이만~ *^^*
P.S// 괜찮으면 추천한방 때려주세요~ 룰루랄라~
알바를 알아봐야겠다... 슬슬 자금의 압박이... -_-;;
http://www.nzeo.com/bbs/zboard.php?id=p_javascript&page=1&sn1=&divpage=1&sn=off&ss=on&sc=off&select_arrange=vote&desc=desc&no=212<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]</div>
내용이 넘어버리게 되면 스크롤바가 나타나서 불편하더군요.
세이클럽도 iframe 을 열심히(?)하고 있는 곳인데, 자기네들한테 맞게 만들어진거라 좀 쓰기가 그렇더라구요.
그래서 간편하게 만들어봤습니다.
iframe에 들어가는 문서에 삽입해주셔야 합니다~ *^^*
<script>
// by 행복한고니(e-mail : gonom9 at empal.com, MSN : gonom9 at hotmail.com)
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>
위 함수를 삽입하고, 문서 제일 아래쪽에
<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(FRAMEID);" + oldFn); //새함수와 기존의 함수를 추가해서 onload이벤트에 할당
</script>
를 삽입해주세요. 가끔씩 body에 onLoad 이벤트를 쓰시는 분들이 있는데 그 분들을 위한 함수입니다.
사용하실땐
iframe에 id와 name 속성을 같은 이름으로 할당하셔야 합니다.
예)
<iframe id=innerFrame name=innerFrame></iframe>
<script>
...(생략)
window.onload = newFunction("resizeFrame('innerFrame');" + oldFn);
</script>
예제페이지 : http://ece.uos.ac.kr/~enc/gony/test.html
예제페이지 : http://ece.uos.ac.kr/~enc/gony/test2.html
제로보드 쓰시는 분들은
<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(FRAMEID);" + oldFn); //새함수와 기존의 함수를 추가해서 onload이벤트에 할당
</script>
이 부분을
<script>
var oldFn = new String(window.onload);
window.onload = new Function("resizeFrame(FRAMEID);" + oldFn); //새함수와 기존의 함수를 추가해서 onload이벤트에 할당
</script>
이렇게 바꿔주세요.
다시한번 말씀드리는데 iframe의 내용이 되는 문서에 삽입해주셔야 합니다.
그럼 이만~ *^^*
P.S// 괜찮으면 추천한방 때려주세요~ 룰루랄라~
알바를 알아봐야겠다... 슬슬 자금의 압박이... -_-;;
http://www.nzeo.com/bbs/zboard.php?id=p_javascript&page=1&sn1=&divpage=1&sn=off&ss=on&sc=off&select_arrange=vote&desc=desc&no=212<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]</div>
댓글 1개
드렁크수달스
19년 전
<SCRIPT LANGUAGE="JavaScript">
<!--
function resizeIframe(fr) {
fr.setExpression('height',aaa.document.body.scrollHeight);
fr.setExpression('width',aaa.document.body.scrollWidth);
}
//-->
</SCRIPT>
<iframe frameborder="0" id="aaa" scrolling="no" src="test.htm" onload="resizeIframe(this)"></iframe>
<!--
function resizeIframe(fr) {
fr.setExpression('height',aaa.document.body.scrollHeight);
fr.setExpression('width',aaa.document.body.scrollWidth);
}
//-->
</SCRIPT>
<iframe frameborder="0" id="aaa" scrolling="no" src="test.htm" onload="resizeIframe(this)"></iframe>
게시글 목록
| 번호 | 제목 |
|---|---|
| 10853 |
JavaScript
속도를 위해 데이터를 접속자 메모리에
|
| 10852 | |
| 10850 | |
| 28848 | |
| 10849 |
JavaScript
백그라운드에음악걸기
|
| 28847 |
HTML
배경에 그림스타일지정
|
| 10846 |
기타
메신저형식의광고
2
|
| 28846 |
HTML
많이 쓰이는 자바스크립트
|
| 10845 | |
| 28845 |
HTML
마우스로 이미지크기 변경하기
|
| 10844 |
JavaScript
도메인 주소에 자동으로 www 붙이기 (php)
|
| 28844 |
HTML
다음부동산매물스크립트1
|
| 28843 |
HTML
다음부동산매물스크립트
|
| 10843 |
JavaScript
다각형이미지슬라이드쇼(익스네츠)
|
| 28842 |
HTML
날짜 형식 입력 받은 값 확인하기
|
| 10842 | |
| 28841 |
HTML
그림클릭시 레이어 띄우기
|
| 10841 |
MySQL
그림을 디비에 저장하는 방법
|
| 28840 |
HTML
그림 앨범 스크립트
|
| 28839 |
HTML
간단한 팝업오브젝트 예제
|
| 10840 |
JavaScript
가운데 정렬된 홈페이지에서 따라다니는 레이어
|
| 10839 | |
| 24791 | |
| 24789 | |
| 10836 |
기타
외부 링크 막기
2
|
| 28838 | |
| 24788 | |
| 24787 | |
| 24786 |
계약서
농지임대차계약서
|
| 28837 | |
| 28834 |
HTML
URL옆에 뜨는 숏컷아이콘만들기.
2
|
| 10835 |
JavaScript
클릭시 펼쳐지는 메뉴
|
| 10834 |
정규표현식
수수료계산
|
| 28833 |
HTML
기본적인 페이징
|
| 28829 |
HTML
만 19세 확인하기
3
|
| 10833 |
JavaScript
IE에서 쓰는 CSS filter 사이트 소개
|
| 10831 | |
| 10830 | |
| 10829 |
JavaScript
iconv 함수 사용시 일부 글자가 변환되지 않는경우
|
| 28828 |
HTML
금액에 점찍고 한글 표시하기
|
| 10828 | |
| 10827 |
MySQL
mysql link 추가로 만들기
|
| 10823 | |
| 10822 |
기타
[펌] SAMBA 설정
|
| 10821 |
JavaScript
1-1000 까지 누락된 숫자 구하기
|
| 10820 | |
| 28822 |
HTML
간단하게 만들어본 프레임워크
5
|
| 10814 | |
| 10812 |
Flash
vr기능-도와주셈
1
|
| 10811 | |
| 10810 |
JavaScript
mod_cband 간단 정리
|
| 10808 |
Flash
간단한 플래시 보완패치입니다.
1
|
| 10804 |
JavaScript
cs..cs2 버젼...윈도우즈 탐색기프리뷰 패치(psd,ai)...
3
|
| 10797 | |
| 28821 |
HTML
IeTagConvertor
|
| 10796 | |
| 10795 |
JavaScript
ncftp 서브 디렉토리 포함 모두 전송
|
| 10794 |
JavaScript
테이블 각 row 마우스오버시 색깔바꾸기
|
| 10792 | |
| 10789 |
MySQL
apache - mod_ssl 설치하기
2
|
| 10785 | |
| 10781 | |
| 10780 |
정규표현식
자바스크립트 이메일 체크 함수
|
| 28820 |
HTML
PHP에서 홈페이지 주소 검사
|
| 10776 |
PHP
문자셋(인코딩 바꾸는 팁
3
|
| 10769 |
JavaScript
당장써먹어야 할 팁) 앞으로 gif는 물러가고 png시대가 될거 같네요
6
|
| 10766 |
JavaScript
full-down메뉴[펌]
2
|
| 10765 |
JavaScript
플래쉬 무비 전체 화면으로 뜨게 하는 fscommand
|
| 10758 |
JavaScript
코딩시 테이블을 줄입시다.
6
|
| 28818 | |
| 10754 |
JavaScript
모든 폰트 설정 한번에 바꾸기(식별자 *의 사용법)
3
|
| 10753 | |
| 10750 | |
| 28817 |
HTML
자바스크립트에서 변수 없애기
|
| 10749 | |
| 10748 | |
| 10747 | |
| 10746 |
JavaScript
[소개]윈도우 미디어 플레이어 - 컨트롤 버튼
|
| 10740 |
JavaScript
iframe사용시 높이 자동 조정
5
|
| 10738 |
Flash
플래시 무비에 레이어 올리기
1
|
| 10735 |
JavaScript
도움말 띄우기 - 관리자 페이지에 있는 것을 추림
2
|
| 10734 | |
| 28812 | |
| 10730 | |
| 10726 | |
| 10725 |
기타
자바스크립트 기초문서
|
| 28811 | |
| 10724 |
JavaScript
숫자를 한글로 변환하기
|
| 10723 |
JavaScript
디렉터리 파일 찾기 순서 DirectoryIndex
|
| 10722 | |
| 10721 | |
| 10717 | |
| 10716 |
기타
Apache 보안 팁
|
| 10715 |
JavaScript
문서루트 위치 DocumentRoot
|
| 10713 |
Linux
lilo.conf
1
|
| 10712 | |
| 10711 | |
| 10710 |
JavaScript
웹 서버가 기다리는 포트(Port)
|
| 10709 |
JavaScript
logrotate.conf의 설정및 옵션에 대한 설명
|
| 10708 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기