웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
iframe 내용에 맞게 자동으로 크기 조절하기
2002.11.21 17:12
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// 괜찮으면 추천한방 때려주세요~ 룰루랄라~
내용이 넘어버리게 되면 스크롤바가 나타나서 불편하더군요.
세이클럽도 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// 괜찮으면 추천한방 때려주세요~ 룰루랄라~
댓글 36
-
최석기
2002.11.23 11:18
-
행복한고니
2002.11.22 11:53
게시판두 당근 가능합니다.
사실 게시판에 적용하기 위해서 만든 스크립트거든요.
음... 페이지 안에 게시판을 iframe으로 만들어서 넣는거죠. 노프레임처럼 보이지만 사실은 iframe이라는... 흐흐흐... -
김창욱
2002.11.22 10:02
행복한 고니님!
이거 게시판같은것두 가능 한가요..?
가능하다면 아이프레임에 들어가는 문서에 넣어줄 스크립트는 어떻게 삽입을 해야 하는지요...?
일반 html문서만 된다면 아주간단한 방법들이 많더라구요... -
inging-zb41
2002.11.21 19:11
후아 복잡하다... 추천 한방!! -
바실레이안
2002.11.21 21:56
제가 잘 이해를 못해서 그러는 데요....
<iframe src='http://www.XXXX..........> 뭐 이런식으로 주소를 써줘야 하는거 아닌가요?
id와 name과 어떻게 연계되는 건지 잘 모르겠습니다. 설명부탁혀요 -
행복한고니
2002.11.21 22:12
src는 당연히 써주리라고 생각한건데요~ ^^
그래야 문서가 나타나죠.
나머지 옵션은 원하시는 대로 써주시구요,
id, name만 같은 이름으로 지정하시면 됩니다. 예시에서는 id와 name을 innerFrame으로 값을 준거구요, 이건 사용자의 마음이죠. -
행복한고니
2002.11.23 18:02
저... 잘못하신게 있는데요... ㅡ_ㅡ;;
iframe을 포함한 문서에 삽입하는게 아니라요...
iframe에 들어가는 문서에 삽입해야하는거에요.
음... 그러니까... 위 소스에서는 top.htm 에 이 소스를 넣으셔야 하는거죠. -
정묘진
2002.11.24 03:03
먼저 아이프레임을 스크립트로 구현하신거 노력에 박수를 보냅니다.
그런데 이건 딴지는 아니구요..^^;
아이프레임이 로딩이 빠르다고 하셨는데..일반적으로 다른언어들보다
로딩이 느리다는게 맞지 않나요??
제가 보기엔 그런거 같은데...^^;; -
김창욱
2002.11.24 15:25
게시판이 가능한건지 안한건지 답변에 영 감을 못잡겠네요..
"페이지 안에 게시판을 iframe으로 만들어서 넣는거죠"
요말은 모르는 사람은 없을태고 자세한 방법을 알고 싶네요
게시판 어디에 스크립트를 넣어야 하며 등등... -
행복한고니
2002.11.25 02:40
그냥 게시판 하단에 전부 밀어두세요~ ^^;; -
최석기
2002.11.25 11:30
행복한고니님께 다시한번 문의요...제가 나모 4.0을 쓰고 있는대요..궁굼한것이 있어서요..
<script>
// 만든넘 : 행복한고니(MAIL : gonom9@empal.com, MSN : gonom9@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;
}
</script>
부분을 위에 삽입하면요
< min_width) i_width = min_width;
oFrame.style.height = i_height;
oFrame.style.width = i_width;
}
</script>
이상하게 이부분부터 활성화가 안되요 저 부분부터 </HTML> 끝날때까지 활성화가 안된다고 표현해야 되나...
나모에서 소스보기를 하면요 저 부분부터 색깔이 죽고 미리보기를 하면 스크립트에 문제가있습니다.그런 메시지 창이
뜨던대...왜 그런지 가르쳐 주세요... -
V(^o^)V
2002.11.25 13:59
저도 이해가 잘...
그냥 소스좀 올려주시죠?
아무나 만드신분 있으시면... 부탁드려요~ -
행복한고니
2002.11.25 15:48
예제페이지라고 올린 부분 있는데요??
그거 참고하세요~ -
행복한고니
2002.11.25 15:49
아! 그리고 안되신다면... ㅡ_ㅡ... 웹 계정에 올려두고 쪽지주세요. -
오감도
2002.11.25 17:12
일반 문서에는 사용해도 무방하지만 게시판에는 사용하기 곤란합니다.
설명대로 원프레임처럼 보이긴 하지만 게시판의경우 리스트 목록이 길경우
브라우져를 스크롤해서 아래부분 목록을 클릭하면 그자리에서 열리는 치명적인 단점이...ㅡㅡ'
긴 내용볼려면 다시 스크롤을 위로 해야 한다는...
보통 리로드하면 페이지 제일 상단부터 뿌려주는데 아이프레임 들어간건 그자리에서 뿌려준다는...
저도 이거 해결방법을 많이 알아봤는데 안되더군요...
다른분이 올려주신 것중에는 문서 최 상위로 올려주는 스크립트가 포함되었으나 아이프레임 문서내
최상단이므로 위에 메뉴등이 짤린다는...서글픈.....저도 이거 해결하는 고수분이 나타나길 학수고대...하면서
글 남깁니다.
이해가 안가시는 분들을 위해서 참고그림 ↓
http://esamsa.com/wz.htm -
오감도
2002.11.25 17:14
위에 그림주소 복사해서 붙여넣기 하세욤...ㅡㅡ" 그냥 클릭하니까 뒤에<br%20/>이런게 붙네요 -
행복한고니
2002.11.25 20:51
오감도//잘되는데요?? 예제페이지 2번 보시길... ㅡ_ㅡ;; -
오감도
2002.11.26 13:46
ㅡㅡ" 당연히 짧은 목록에 짧은글은 문제 없읍니다.(고니님이 쓰신 목록은 2개....)
예제페이지 2번에 목록을 15개~20정도 만들어서(브라우져 스크롤이 넘어가는 길이)
스크롤이 넘어가는 목록을 클릭해보세요
예를들어 목록이 20개씩 있다면 18번째목록을 클릭하고 18번째 내용이 길때
브라우져가 스크롤된 그상태로 내용이 보입니다.(내용일 잛다면 문제 없지만요) -
행복한고니
2002.11.26 14:13
오감도//아~ 말씀하신 문제를 알았네요. ㅡ_ㅡ... 그건 iframe의 특성상 어쩔 수 없는건데...떱...
수정해두었습니다~ ^^ -
오감도
2002.11.26 14:20
행복한고니님 정말 감사드립니다!!!!
옆에 계시면 커피라두ㅡㅡ" 한잔 사드리고...싶오~~요 (__) -
오감도
2002.11.26 14:22
왕! 추천!!! (10자 이상이네요 ㅡ.ㅡ) -
우성민
2003.01.11 16:37
이거 무슨 말인지 모르겠어요~!!!1
이거 적용한 소스 봤으면 이해 좀 하겠는데요~!! -
함씨
2003.01.15 14:47
아~~~ 무리 해봐도 안돼네염.. 고니님의 예제2 를 소스 복사해도 스크롤이 생기고
제가 만들어 봐도 스크롤이 생기고 어찌 해야 하는지... 게시판 옵션에서 하단에 넣어봤고
아무리 용써도 안돼네염.. 참고로 ie6.0 쓰고 있는데 그게 문제 인건지? -
정경석
2003.01.18 11:56
제로보드에서 "엑세스가 거부되었 습니다." 라고 하는데
어떻게 된거죠? -
풍월주인
2003.01.30 11:55
iframe 태그가 포함될 문서랑 iframe 내부에 포함된 문서가 다른 서버에 있으니까
엑세스가 거부되었습니다라고 나오더군요..
다음카페 게시판에서 iframe으로 제홈피(카페24계정)과 localhost의 문서로 연결을 해봤는데
두곳다 안되더군요.. 그래서 카페24계정내에 두개를 다 두니까 이상이 없없습니다.
아마도 동일 서버에 있을때만 적용가능한게 아닌가 싶네요.. -
+ 안젤로 +
2003.01.31 14:54
최고다! 저는 전체 화면에서 테이블 만들고 왼쪽오른쪽 아이프레임 하나씩 쓴 다음에
오른쪽 아이프레임에 이거 사용했는데요, 너비 조절하는건 빼고 높이만. 근데 잘되는군요!
근데 아이프레임 너비를 95%로 해줬더니 리프레쉬 할때마다 줄어든다는 ^^;;;;
그래서 100%놓고 씁니다.
제로보드에는 그룹설정에서 맨 밑에 이거 붙여놨어요. 호호. 감사합니다!
<script>
// 만든넘 : 행복한고니(MAIL : gonom9@empal.com, MSN : gonom9@hotmail.com)
function resizeFrame(name){
var oBody = document.body;
var oFrame = parent.document.all(name);
var min_height = 320;
var min_width = 465;
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(0,0);
}
var oldFn = new String(window.onload);
window.onload = new Function("resizeFrame('아이프레임이름');" + oldFn);
</script> -
+ 안젤로 +
2003.01.31 16:23
그리고 작은 아이프레임에 넣을거라면
<script>
self.resizeTo(document.body.scrollWidth , document.body.scrollHeight + 10);
</script>
이것만 넣어줘도 충분하군요 ^^ 예전에 PHPSCHOOL에 '곰'이란 분이 코멘트로 올리신거에요. -
+ 안젤로 +
2003.02.13 00:25
다 좋은데 익스5.0에서는 안된다는;; 해결책이 없을꼬 -
김형주
2003.02.16 02:39
테크노트에 적용을 하려면 어떻게 해야하나요?
궁금합니다.
아무리해도 잘 안되어서... -
권윤호
2003.02.24 08:04
제로보드 게시판 하단에 출력할 내용 적용시에 안젤로님처럼 똑같이 적용했을경우 페이지 오류라고 나옵니다.
안젤로님이 남겨주신 글을 그대로 복사해서 resizeFrame('아이프레임이름');" 이부분만 고쳐줬거든요. 그런데 왜 페이지 오류라고 나오는지 모르겠습니다.
소스에 문제가 없다면 질문이 막 생겨버리는데...
혹시 익스플로버젼으로 인해 문제가 생길수도 있습니까?
그런데 제로보드 하단에 곰님이 의 방법
<script>
self.resizeTo(document.body.scrollWidth , document.body.scrollHeight + 10);
</script>
이걸 적용했을땐 돼더라구요
아직 문제점을 찾아내지 못해서 드리는 말씀인데 곰님이 해주신 방법을 했을경우
안젤로님이 작은 아이프레임에 적용하기에 좋다고 하셨는데
이방법을 썼을경우 제로보드를 아이프레임으로 불러들였을때 어떤한 문제점이 생기나요?
만약 별문제가 안생긴다면 곰님이 하시는 방법이 훨씬간판할꺼 같은데요
어떤걸 선택해야 하나요? -
메이
2003.03.02 20:15
고니 님의 방법은 도메인 앞의 www 의 유무에 따라서도 오류가 생기네요...^^;;
해결방법이 없을런지...
그래서 저도 게시판에는 곰님의 방법을 적용했는데 어떤 문제가 생길 수 있는지 아시는 분 답변 부탁드릴께요... -
covingtoN
2003.03.31 17:42
대단히 고맙습니다.
너무 훌륭한 팁이군요. -
한정수
2003.04.12 06:25
아이프레임의 길이는 늘어나기말 할뿐.. 줄어들지는 않네용.. -_-; -
Wing
2003.08.12 14:20
아앗!! 어떻게 쓰는건지 감 잡아쓰!;; 정말 감사해요 ^^ 천재야~~ 원츄!! >_<b -
오상철
2003.09.09 17:20
몇가지 팁중에서 젤낳군요, 다른팁은 <a ..>테그로 타겟지정할때 제대로 안되던데, 고니님꺼는 되는군요,
궁금한게있는데,
parent.scrollTo(1,1); //부모문서의 스크롤 위치를 1, 1로 옮긴다.(오감도님이 지적해주셨어요~^^)
여기서요, 이함수를 어떻게 불러쓸수있는방법은 없나요?
책갈피기능대신에 좀 쓰고싶은데,.. -
최현태
2004.02.22 14:03
몇칠동안 고민했었는데, 진작에 이글을 볼걸하는 후회가 드는군요. Very Excellent !!!!
제목 | 글쓴이 | 날짜 |
---|---|---|
FLV 사이트 다운로더 소스
![]() | fallstoofast | 2008.03.07 |
웹페이지 미리보기 snapshot 활용하기 [2] | 유창화 | 2008.02.15 |
OGIT STUDY 3 [1] | OGIT | 2008.02.01 |
OGIT STUDY 2 [1] | OGIT | 2008.02.01 |
OGIT STUDY 1 | OGIT | 2008.02.01 |
웹 계정에서 지워지지 않는 폴더 및 파일 삭제하는 방법 [3] | Rising.kr | 2008.01.24 |
php에서 exif소스이용하기 [5] | 최만순279 | 2007.11.18 |
관리자모드 - 관리자그룹만 모든 회원리스트보기 [2] | 이지혜609 | 2007.10.23 |
포인트부여시 ...회원로그인 [2] | 구본순 | 2007.08.28 |
간단한 칠판 모양 게시판
[9]
![]() | SoukoZ | 2007.08.19 |
[PDF 제작하기 동영상강좌] 3. 기존의 PDF파일 불러오기 [2] | 서기 | 2007.08.18 |
[PDF 제작하기 동영상강좌] 2. Hello PDF | 서기 | 2007.08.18 |
[PDF 제작하기 동영상강좌] 1. 기본환경 설정 [1] | 서기 | 2007.08.18 |
[zbXE 동영상강좌] 3. 레이아웃 완성하기 [13] | 서기 | 2007.08.16 |
[zbXE 동영상강좌] 2. 포토샵에서 레이아웃 만들기 [12] | 서기 | 2007.08.16 |
[zbXE 동영상강좌] 1. zbXE 설치하기 [2] | 서기 | 2007.08.16 |
[PHP 동영상강의] 51. db와 연동된 다중 셀렉트 제작하기 [7] | 서기 | 2007.08.08 |
[PHP 동영상강의] 50. 자바스크립트로 풀다운 메뉴제작 [2] | 서기 | 2007.08.08 |
[PHP 동영상강의] 49. 만년달력 제작해보기 [1] | 서기 | 2007.08.08 |
멀티플 파일 업로드 프로그래시브 - SWFUpload [1] | PHPer | 2007.07.19 |
원프래임으로 작업해야할것이 있는대.아이프래임을 써서 할려고 하거든요 행복한고니님이
남겨주신 쏘스가 꼭필요한대요 어떻게 해야될질 몰라서요...글 남깁니다 한번만 봐주세요...
행복한고니님 소스를 뺴고 아이프래임을 적용해봤는대 왼쪽부분에 메뉴부분을 일일이 높이를
맞춰야 되더라고요..그래서 고민고민중이었는대 마침 딱 쏘스를 구했다 싶었는대 안되서요..
ㅡㅜ 부탁드려요..~~~~아 그리고 제로보드도 똑같이 적용이 되나요?
<html>
<head>
<title>제목없음</title>
<meta name="generator" content="Namo WebEditor v4.0">
<style type="text/css">
td {font-size:12px; font-family:굴림; text-decoration:none; color:black}
a:link {font-size:12px; font-family:굴림; text-decoration:none; color:black}
a:visited {font-size:12px; font-family:굴림; text-decoration:none; color:black}
a:hover {font-size:12px; font-family:굴림; text-decoration:underline; color:#F42000}
p {font-size:12px; font-family:굴림; line-height:20px; margin-top:0; margin-bottom:0}
input {font-size:12px; font-family:굴림; line-height:20px; margin-top:0; margin-bottom:0}
textarea {font-size:12px; font-family:굴림; line-height:20px; margin-top:0; margin-bottom:0}
</style>
<script>
// 만든넘 : 행복한고니(MAIL : gonom9@empal.com, MSN : gonom9@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;
}
</script>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="802" bgcolor="gray">
<tr>
<td width="800" colspan="2" bgcolor="white" height="2">
<p><iframe src="top.htm" align="left" frameborder="0" scrolling="no" id=innerFrame name=innerFrame></iframe></p>
</td>
</tr>
<tr>
<td width="163" bgcolor="white" height="19">
<p>
<iframe src="menu.htm" align="left" frameborder="0" scrolling="no" id=innerFrame name=innerFrame></iframe></p>
</td>
<td width="634" bgcolor="white" height="19">
<p> </p>
</td>
</tr>
</table>
<p> </p>
<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>
</html>