<출처 : http://www.taeyo.pe.kr (ASP 게시판)>의 내용을 토대로 재구성하였습니다. [출처] iframe-x에서 내용에 따라 자동으로 크기 변환하기 |작성자 꼼
iframe-x을 사용하면서 어떻게 하면 스크롤바가 나타나지 않게 할 수 있을까?
하는 문제를 고민해 보게 된다.
다음 자바스크립트를 사용하면 이런 문제를 해결할 수 있다.
그러나 이 해결책은 동일한 도메인에서 동작할 때만 가능하다.
실제로 LoadBalancing을 할 경우에도 경로를 "/xxx/xxx.asp" 이런 형태로 잡아주니까 제대로 동작했었다. (당연한거 아닌가? -.-)
그럼 먼저 자바스크립트 구문을 살펴보자..
1. 자바스크립트
<script-x>
function Resize_Frame(name)
{
var Frame_Body = document.frames(name).document.body;
var Frame_name = document.all(name);
Frame_name.style.width
= Frame_Body.scrollWidth + (Frame_Body.offsetWidth-Frame_Body.clientWidth);
Frame_name.style.height
= Frame_Body.scrollHeight + (Frame_Body.offsetHeight-Frame_Body.clientHeight);
if (Frame_name.style.height == "0px" || Frame_name.style.width == "0px")
{
Frame_name.style.width = "500px"; //기본 iframe-x 너비
Frame_name.style.height = "300px"; //기본 iframe-x 높이
window.status = 'iframe-x resizing fail.';
}
else
{
window.status = '';
}
}
</script-x>
프레임에 들어갈 것의 Width와 Height를 가져와서 그 값으로 iframe-x의 크기를 설정해 주고 있다.
Frame_Body는 iframe-x 안에 들어가는 실제 내용을 가리키고 있으며
Frame_name은 iframe-x 자체를 가리키고 있는 것이다.
어쨌든, 왠만하면 위 소스를 그대로 가져다가 사용하면 된다. ㅋㅋ
2. 활용
활용하기 위해서 iframe-x에 다음과 같이 넣어주면 된다.
<iframe-x name="contents" id="contents" src="/bbs/user/com_list.asp" marginwidth="1" marginheight="1" height="100"
width="500" scrolling="no" border="0" frameborder="0" onLoad="Resize_Frame('contents');"></iframe-x>
세 가지 사항만 주의해서 사용하면 된다.
첫째, name="contents" id="contents" 이 부분이 바뀌면 반드시 Resize_Frame('contents') 요 부분도 변경해 준다.
대 부분의 경우 그대로 사용하면 된다.
둘째, src="/bbs/user/com_list.asp" 와 같이 반드시 동일한 서버 내에 있는 주소만이 위와 같이 동작한다.
그렇지 않은 경우, 자바스크립트가 제대로 처리되지 않는다.
셋째, onLoad="Resize_Frame('contents');" 이 부분을 넣어주면 iframe-x이 열릴 때마다 창의 크기를 새롭게 설정하게 된다.
경우에 따라, 이 부분이 잘 동작하지 않을 수도 있다. 그럴 때는 부모 프레임의 <body>에 다음과 같이
<body onLoad="Resize_Frame('contents');".. > 넣어주면 된다. (단, 이 경우는 처음 로딩할 때만 크기 계산함)
추가사항 : 만약 서로 도메인이 다르다면, 두 문서 모두에 document.domain을 동일하게 설정해 주면 된다고 한다.
3. iframe-x 내부에 넣기
경우에 따라 iframe-x 내부에서 창의 크기를 조절해야 할 필요가 있다.
iframe-x으로 들어가는 소스에 다음 자바스크립트를 넣으면 된다.
<script-x>
setTimeout("self.resizeTo(document.body.scrollWidth , document.body.scrollHeight)",500);
</script-x>
그러면 Parent Frame에서 특별한 작업 필요없이 해결할 수 있다.
단, 이 경우 현재 IE6.0 이상에서만 테스트 되었다.
'웹프로그램' 카테고리의 다른 글
| 자바스크립트 <a href 클릭시 팝업 띄우기 및 클릭한 URL 값 받아오기 (0) | 2008.11.07 |
|---|---|
| 자바스크립트로 클릭 이벤트 강제 발생 시키기 (0) | 2008.11.07 |
| 자바스크립트 select 셀렉트 박스 선택한 값을 받아오기 (0) | 2008.11.07 |
| 자바스크립트 아이프레임 내용 길이에 맞게 리사즈 하기 (0) | 2008.11.07 |
| 자바스크립트 select 값 받기 (0) | 2008.11.07 |
| 자바스크립트에서 이미지 파일이 없는 경우 오류 안보이게 하기 (0) | 2008.11.07 |
| 자바스크립트 팝업을 가운데 띄우고 포커스를 팝업으로 하기 (0) | 2008.11.07 |
| 자바스크립트 문자열 우측에서 잘라서 가져오기 (0) | 2008.11.07 |