본문 바로가기

Story/Javascript

아이프레임으로 문서크기 자동조절하기

반응형

이 글은 다른분이 올리신 방법을 약간 수정 했습니다.

아이프레임 사용시 문서크기를 자동으로 조절하려면 아래 소스를 아이프레임 내의 제일 하단에 넣어 주세요.
<script>
        document.body.scrollIntoView(true);
        parent.document.all.inner1.height = document.body.scrollHeight;
</script>


그리고 아이프레임 소스를 아래와 같이 만들어 주세요.
<iframe id=inner1 src='test.htm' width=600 height=0 frameborder=0 scrolling=no marginwidth=0 marginheight=0 leftmargin=0 topmargin=0></iframe>


문서의 크기에 맞게 조절하기 위해서 iFrame으로 호출될 문서에 스크립트를 썼습니다.
문서가 다 읽히면 그 문서의 길이를 구해 다시 iFrame 의 높이를 조절하는 겁니다.
폭은 width=600 의 값을 조절해 주시면 되겠죠?
document.body.scrollIntoView(true);
현 문서의 맨 마지막으로 이동을 명령합니다. (faile) 라고 해주면 맨 아래로 갑니다.

parent.document.all.inner1.height = document.body.scrollHeight;


inner1 은 iframe 의 id 또는 name 값입니다.
iframe 의 입장에서는 자신을 포함하고 있는 문서가 부모(parent) 가 됩니다.
해석을 하면 부모.문서.모든것중.inner1.높이 에 현재 내 문서(iframe안의 문서)의 스크롤까지 포함한 높이로 바꿔줘라..입니다.

만약 아이프레임 내부에 게시판이 들어간다면 관리자 모드 게시판 환경설정에서 "게시판 하단에 출력할 내용"의
</div>앞에  
<script>
        document.body.scrollIntoView(true);
        parent.document.all.inner1.height = document.body.scrollHeight;
</script>
를 넣으시면 됩니다.

또 아이프레임 상태에서 최근게시물을 표시하면 일반적으로 새창으로 게시판만 덜렁뜨는데 이것은 새로운 문서 한장을 만들고 그곳에 최근게시물을 만들어 주시고 링크를 거시면 됩니다.
최근게시물 상단에는 기본 제로 경로 설정이 되어있어야합니다.

또한 링크 타겟을 주시면 완벽하게 두장의 html문서 만으로 홈페이지가 완성됩니다.

음악을 링크 걸 경우에도 초기 페이지가 변경이 안되니 음악이 끊길 염려가 없겠지요?

기존의 노프레임이나 프레임을 나눠 불편한것을 해소시킬수 있을것입니다
 
반응형