웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
[iframe:아이프레임] 내용에 맞게 사이즈 조절하기 한번입력으로 끝.[다른방법:중복아닌듯]
2004.04.23 10:22
중복확인 해봤는데 엔지오에 있는 스크립트들은 보통
iframe 안에 들어갈 a.html 과 같은곳에 그스크립트를 넣어야 하더라구요
이방법으론 iframe에서 어떤페이지를 로드하던간에 그 속에 들어갈 페이지 안에는
반드시 사이즈를 조절할 스크립트가 들어가야합니다.
그래서 만든건데 이건 iframe 이 정의된 페이지에 한번만 넣어주시면 됩니다.
그럼 그속에 어떤페이지라도..단,! 자신의 계정에 있는 페이지 일때만 가능합니다. 이건 다른 스크립트랑 똑같네요
다른 계정의 페이지면 엑세스가 거부 됩니다.
/* 설명수정
다른계정이라 함은 자신의 사이트 외에 다른 사이트의 내용을
iframe으로 가져올때 자바스크립트로 접근이 안됩니다.
그래서 자신의 계정을 불러와야 하구요..
*/
+------------------------------------------------------------------------------------+
[2005-08-24] 내용수정
- 문뜩 반문객 사이트에 돌아다니다 보니 너무 느려서 iframe 의 onload 이벤트가 늦게 발생하여
스크롤만 잔뜩 내려간체로 그냥 있더군요.. 이런경우 링크를 클릭하면 onload 이벤트가 발생하기 전까진
이전의 사이즈를 유지하고 있음으로왠지 느리다는 느낌이 들더라구요 그래서 다른 이벤트를 찾아봤습니다.
이벤트는 onreadystatechange 이벤트구요
총 3번 호출됩니다.
1. loading
2. interactive
3. complete
그래서 총 3번 리사이징을 하게 됩니다.
특징은 목록과 내용을 와따가따 해보시면 알겁니다.
초기화가 되느냐 안되느냐의 차이정도입니다.
아무튼 예제 보시고 써보실 분들은 예제에 코드 포합했습니다.
예제 ] http://maxpond.netcci.net/etc/inner_iframe.html
+------------------------------------------------------------------------------------+
암튼 예제,소스 나갑니다.
일반예제 ) http://maxpond.netcci.net/etc/iframetest.html
하부프레임예제 ) http://maxpond.netcci.net/etc/iframetest.html?inner=1
[JavaScript] : <head>~</head> 사이에 넣어줍니다.
===========================================================
<script language='JavaScript' type='text/javascript'>
<!--
function resizeFrame(iframeObj){
/* 아이프레임에서 읽어들인 페이지의 body */
var innerBody = iframeObj.contentWindow.document.body;
/* 높이 다시설정 */
var innerHeight = innerBody.scrollHeight + (innerBody.offsetHeight - innerBody.clientHeight);
iframeObj.style.height = innerHeight;
/*---------- 넓이도 함께 자동조정되야 한다면 주석을 풀어주세요~--------------------------------
// 넓이 다시설정
var innerWidth = innerBody.scrollWidth + (innerBody.offsetWidth - innerBody.clientWidth);
iframeObj.style.width = innerWidth;
---------------------------------------------------------------------------------------------------*/
this.scrollTo(1,1); //[락위듀]아렌티 님의 지적
}
//-->
</script>
===========================================================
[iframe]
===========================================================
아이프레이 태그 안에 다음 프로퍼티를 넣어줍니다.
onload="resizeFrame(this)"
ex) <iframe src="#" onload="resizeFrame(this)" scrolling="no"></iframe>
===========================================================
이러면 됩니다.
[2004-12-30 수정 스크립트]
----------------------------------------------------------------------------------------------------------------
윤상권님의 지적으로 수정하게 된 스크립트 입니다.
게시판에서 글쓰기 모드일때 textarea 의 사이즈를 늘려주는 기능을 이전 스크립트로는 처리하지 못했습니다.
그렇다고 해당게시판 스킨을 직접수정하기에도 번거러움이 있을것 같아서 아예 frame 속의 문서 전체에 이벤트를 걸어서
다시 사이즈 조정을 하도록 만들었습니다.
<script language='JavaScript' type='text/javascript'>
<!--
function resizeFrame(iframeObj){
/* 아이프레임에서 읽어들인 페이지의 body */
var innerBody = iframeObj.contentWindow.document.body;
/*
* 특정이벤트 발생시 다시 사이즈 조정!! ( 윤상권님의 지적 )
* ex )
* 항상 들어가야할 내용 입니다.
* 혹시 아이프레임 속에 BODY 에 이미 이벤트가 정의 되어 있을경우를 위해
* oldEvent = innerBody.ondbclick;
* 위와 같은 식으로 이벤트를 백업받아놓으면 될듯 합니다.
* 1. innerBody.ondbclick = function { resizeFrame(iframeObj, 1);oldEvent; };
* 2. innerBody.onmousemove = function { resizeFrame(iframeObj, 1);oldEvent; };
* 3. innerBody.onkeydown = function { resizeFrame(iframeObj, 1);oldEvent; };
*/
oldEvent = innerBody.onclick;
innerBody.onclick = function(){ resizeFrame(iframeObj, 1);oldEvent; };
/* 높이 다시설정 */
var innerHeight = innerBody.scrollHeight + (innerBody.offsetHeight - innerBody.clientHeight);
iframeObj.style.height = innerHeight;
/*---------- 넓이도 함께 자동조정되야 한다면 주석을 풀어주세요~--------------------------------
// 넓이 다시설정
var innerWidth = innerBody.scrollWidth + (innerBody.offsetWidth - innerBody.clientWidth);
iframeObj.style.width = innerWidth;
---------------------------------------------------------------------------------------------------*/
if( !arguments[1] ) /* 특정 이벤트로 인한 호출시 스크롤을 그냥 둔다. */
this.scrollTo(1,1);
}
//-->
</script>
사용방법은 똑같습니다.
iframe 안에 들어갈 a.html 과 같은곳에 그스크립트를 넣어야 하더라구요
이방법으론 iframe에서 어떤페이지를 로드하던간에 그 속에 들어갈 페이지 안에는
반드시 사이즈를 조절할 스크립트가 들어가야합니다.
그래서 만든건데 이건 iframe 이 정의된 페이지에 한번만 넣어주시면 됩니다.
그럼 그속에 어떤페이지라도..단,! 자신의 계정에 있는 페이지 일때만 가능합니다. 이건 다른 스크립트랑 똑같네요
다른 계정의 페이지면 엑세스가 거부 됩니다.
/* 설명수정
다른계정이라 함은 자신의 사이트 외에 다른 사이트의 내용을
iframe으로 가져올때 자바스크립트로 접근이 안됩니다.
그래서 자신의 계정을 불러와야 하구요..
*/
+------------------------------------------------------------------------------------+
[2005-08-24] 내용수정
- 문뜩 반문객 사이트에 돌아다니다 보니 너무 느려서 iframe 의 onload 이벤트가 늦게 발생하여
스크롤만 잔뜩 내려간체로 그냥 있더군요.. 이런경우 링크를 클릭하면 onload 이벤트가 발생하기 전까진
이전의 사이즈를 유지하고 있음으로왠지 느리다는 느낌이 들더라구요 그래서 다른 이벤트를 찾아봤습니다.
이벤트는 onreadystatechange 이벤트구요
총 3번 호출됩니다.
1. loading
2. interactive
3. complete
그래서 총 3번 리사이징을 하게 됩니다.
특징은 목록과 내용을 와따가따 해보시면 알겁니다.
초기화가 되느냐 안되느냐의 차이정도입니다.
아무튼 예제 보시고 써보실 분들은 예제에 코드 포합했습니다.
예제 ] http://maxpond.netcci.net/etc/inner_iframe.html
+------------------------------------------------------------------------------------+
암튼 예제,소스 나갑니다.
일반예제 ) http://maxpond.netcci.net/etc/iframetest.html
하부프레임예제 ) http://maxpond.netcci.net/etc/iframetest.html?inner=1
[JavaScript] : <head>~</head> 사이에 넣어줍니다.
===========================================================
<script language='JavaScript' type='text/javascript'>
<!--
function resizeFrame(iframeObj){
/* 아이프레임에서 읽어들인 페이지의 body */
var innerBody = iframeObj.contentWindow.document.body;
/* 높이 다시설정 */
var innerHeight = innerBody.scrollHeight + (innerBody.offsetHeight - innerBody.clientHeight);
iframeObj.style.height = innerHeight;
/*---------- 넓이도 함께 자동조정되야 한다면 주석을 풀어주세요~--------------------------------
// 넓이 다시설정
var innerWidth = innerBody.scrollWidth + (innerBody.offsetWidth - innerBody.clientWidth);
iframeObj.style.width = innerWidth;
---------------------------------------------------------------------------------------------------*/
this.scrollTo(1,1); //[락위듀]아렌티 님의 지적
}
//-->
</script>
===========================================================
[iframe]
===========================================================
아이프레이 태그 안에 다음 프로퍼티를 넣어줍니다.
onload="resizeFrame(this)"
ex) <iframe src="#" onload="resizeFrame(this)" scrolling="no"></iframe>
===========================================================
이러면 됩니다.
[2004-12-30 수정 스크립트]
----------------------------------------------------------------------------------------------------------------
윤상권님의 지적으로 수정하게 된 스크립트 입니다.
게시판에서 글쓰기 모드일때 textarea 의 사이즈를 늘려주는 기능을 이전 스크립트로는 처리하지 못했습니다.
그렇다고 해당게시판 스킨을 직접수정하기에도 번거러움이 있을것 같아서 아예 frame 속의 문서 전체에 이벤트를 걸어서
다시 사이즈 조정을 하도록 만들었습니다.
<script language='JavaScript' type='text/javascript'>
<!--
function resizeFrame(iframeObj){
/* 아이프레임에서 읽어들인 페이지의 body */
var innerBody = iframeObj.contentWindow.document.body;
/*
* 특정이벤트 발생시 다시 사이즈 조정!! ( 윤상권님의 지적 )
* ex )
* 항상 들어가야할 내용 입니다.
* 혹시 아이프레임 속에 BODY 에 이미 이벤트가 정의 되어 있을경우를 위해
* oldEvent = innerBody.ondbclick;
* 위와 같은 식으로 이벤트를 백업받아놓으면 될듯 합니다.
* 1. innerBody.ondbclick = function { resizeFrame(iframeObj, 1);oldEvent; };
* 2. innerBody.onmousemove = function { resizeFrame(iframeObj, 1);oldEvent; };
* 3. innerBody.onkeydown = function { resizeFrame(iframeObj, 1);oldEvent; };
*/
oldEvent = innerBody.onclick;
innerBody.onclick = function(){ resizeFrame(iframeObj, 1);oldEvent; };
/* 높이 다시설정 */
var innerHeight = innerBody.scrollHeight + (innerBody.offsetHeight - innerBody.clientHeight);
iframeObj.style.height = innerHeight;
/*---------- 넓이도 함께 자동조정되야 한다면 주석을 풀어주세요~--------------------------------
// 넓이 다시설정
var innerWidth = innerBody.scrollWidth + (innerBody.offsetWidth - innerBody.clientWidth);
iframeObj.style.width = innerWidth;
---------------------------------------------------------------------------------------------------*/
if( !arguments[1] ) /* 특정 이벤트로 인한 호출시 스크롤을 그냥 둔다. */
this.scrollTo(1,1);
}
//-->
</script>
사용방법은 똑같습니다.
댓글 45
제목 | 글쓴이 | 날짜 |
---|---|---|
[iframe:아이프레임] 내용에 맞게 사이즈 조절하기 한번입력으로 끝.[다른방법:중복아닌듯] [45] | beMax | 2004.04.23 |
(For 초보)원클릭으로 여러프레임 컨트롤하기 [2] | 쉬드 | 2004.04.19 |
자기가 살아온 시간 구하기.. 데스크탑에 나타내기 [4] | kein23 | 2004.04.14 |
브라우저 버젼별 다른 페이지 보여주기 [2] | Kuldahar | 2004.04.13 |
바보같은 MS의 parseInt 버그. [4] | 김관석 | 2004.04.09 |
XP계열의 방문자 컴에서 ClearType 효과 사용여부 확인 [4] | YeUPy | 2004.04.04 |
팝업공지창 2개이상 띄우기(시간제한 가능) [8] | lemin | 2004.03.23 |
허접한 풀다운 메뉴 소스입니다. (유용한 팁 일지는 모르겠네요.)
[9]
![]() | tintintm | 2004.03.23 |
버튼 만들기 [1] | 旻天 | 2004.03.23 |
MS agent online object - Default Character 인 Merlin Action 추가 [2] | 꽃ちゃん | 2004.03.19 |
움직이는 타이틀바 [4] | 김동현 | 2004.03.18 |
웹브라우저 상태바가 밑으로 내려오는 소스 [5] | 프리서버 | 2004.03.16 |
브라우져(윈도우) 창의 크기(사이즈)를 조절하는 소스입니다 [5] | 나야 | 2004.03.15 |
프레임사이트에서 자식 프레임(URL)로 직접 치고 들어 올경우 다시 프레임 부모로 돌려보내는 소스 | 나야 | 2004.03.15 |
전체 include menu 만들기(롤오버 이미지 사용) [4] | Neoyoung | 2004.03.14 |
[초간단 자바스크립트!] 서브메뉴 만들기...~ [11] | ∑Ztxy | 2004.03.10 |
뉴스티커
[16]
![]() | zero | 2004.03.10 |
보안문서 만들기 [5] | 민우주 | 2004.03.07 |
팝업 창 띄우고 어미창 사라지게 하는 소스 [5] | piasol | 2004.03.06 |
방문자 OS보여주기 [5] | 구조반 | 2004.03.05 |