그러냐

iframe 크기 자동 조절 본문

javascript

iframe 크기 자동 조절

관절분리 2016. 1. 27. 18:01
반응형
출처 마루아라 | 마루아라
원문 http://blog.naver.com/tyboss/70016985407

iframe 객체 접근방식

<iframe id="processFrame" border="0" width="0" height="0" style="display:none;"></iframe>

href = document.getElementById("processFrame").contentWindow.location.href;

 

 

 

게시판을 IFRAME으로 페이지에 삽입할 경우 IFRAME 내부의 내용이 설정한 높이(height)

보다 크게되면 스크롤바가 생기게 됩니다.
그러면 보기에도 별로 안좋고 사용하기도 불편하게 되죠..

그럴때 내용의 크기에 따라서 IFRAME의 크기를 변경해 주면 스크롤바를 안보이게 할 수 있습니다.

내보드를 IFRAME으로 페이지에 삽입할 경우 사용하시면 스크롤바 없이 깔끔하게 처리하실 수 있습니다.



일단 아래의 자바스크립트 코드를 페이지에 포함 시킵니다.




function ResizeFrame(name)
{
  // IFRAME 내부의 body 개체
  var fBody  = document.frames(name).document.body;
  // IFRAME 개체
  var fName  = document.all(name);

  // IFRAME 내부의 body개체의 넓이를 계산하여 IFRAME의 넓이를 설정해 준다.
  fName.style.width 
    = fBody.scrollWidth + (fBody.offsetWidth - fBody.clientWidth);
  // IFRAME 내부의 body개체의 높이를 계산하여 IFRAME의 높이를 설정해 준다.
  fName.style.height 
    = fBody.scrollHeight + (fBody.offsetHeight - fBody.clientHeight);

  // 만약 IFRAME의 크기 설정에 실패 하였다면 기본크기로 설정한다.
  if (Frame_name.style.height == "0px" || Frame_name.style.width == "0px")
  {
    fName.style.width = "700px";     //기본 iframe 너비
    fName.style.height = "300px";    //기본 iframe 높이
  }
}



위 자바스크립트를 페이지에 포함시키셨다면 이제 IFRAME 내부의 페이지가 로드 될때마나 크기를 다시 설정 하도록

onload 이번트에서 자바스크립트 함수를 호출해 줍니다.




<iframe name="NeBoard" src="/neboard/board.aspx?bno=005001&mode=LIST&goto=1"
    scrolling="No" onLoad="ResizeFrame('NeBoard');" ></iframe>



이렇게 하시면 IFRAME내부의 페이지가 로드될때 마다 크기를 계산해서 IFRAME의 크기를

알맞게 다시 설정해 주기때문에 스크롤바가 표시 않되도록 할 수 있습니다.



그럼 유용하게 사용하시고, 혹시 질문사항 있으시면 질문 답변 게시판으로 올려주세요~
내용 복사
다음 글 파일 다운로드 구현시 한글 깨지는 문제 해결법
blueness (2004-07-15 오후 3:31:07)
또 다른 방법을 알려드릴께요.
위의 방법은 부모페이지(iframe을 포함하는 페이지)에서 삽입할 스크립트지만...
만약 여러군데에서 불러와야 된다면 차라리
/neboard/board.aspx 페이지 맨 하단에 다음을 넣어도 됩니다.

<script>
if(window != top)
{
self.resizeTo(document.body.scrollWidth, document.body.scrollHeight + 10);
}
</script>

간단하긴 하지만, IE 5.5 이상에서만 지원된다는 단점이 있습니다.
요즘 대부분 5.5 이상을 쓰시니까 쓰시기 괜찮을 겁니다...^^
닷넷피아 (2004-07-15 오후 4:13:08)
페이지가 여러개라면 blueness님의 방법이 더 효과적이겠네요.
좋은 정보 감사 합니다. ^^
batman3 (2004-07-30 오후 3:20:38)  x 
닷넷피아 방법으로 했는데 에러가 나는데요.
스크립트 오류발생
줄 30 문자 1 엑세스가 거부 되었습니다.코드 0 로 되있구요
해당 스크립트는 html문서의 head 사이에 아래와 같이 삽입 했구요.
var fBody = document.frames(name).document.body; 가 오류 번호줄 입니다.
<script language="JavaScript" type="text/JavaScript">
function ResizeFrame(name)
{
// IFRAME 내부의 body 개체
var fBody = document.frames(name).document.body;
// IFRAME 개체
var fName = document.all(name);
// IFRAME 내부의 body개체의 넓이를 계산하여 IFRAME의 넓이를 설정해 준다.
fName.style.width
= fBody.scrollWidth + (fBody.offsetWidth - fBody.clientWidth);
// IFRAME 내부의 body개체의 높이를 계산하여 IFRAME의 높이를 설정해 준다.
fName.style.height
= fBody.scrollHeight + (fBody.offsetHeight - fBody.clientHeight);
// 만약 IFRAME의 크기 설정에 실패 하였다면 기본크기로 설정한다.
if (Frame_name.style.height == "0px" || Frame_name.style.width == "0px")
{
fName.style.width = "640px"; //기본 iframe 너비
fName.style.height = "500px"; //기본 iframe 높이
}
}
</script>

글구 아이프레임은 아래와 같이 삽입 했습니다.
<iframe src="http://localhost/Board/list.aspx" name="list" width="640" height="500" frameborder="0" scrolling="no" onLoad="ResizeFrame('list');"></iframe>
맞는것 같은데 스크립트 오류가 뜨네요.또한 자동으로 늘어나지가 않아요.
비지 하시겠지만 한번만 봐 주세요.^^;
배트맨3 (2004-07-30 오후 3:26:47)  x 
또한 블러니스님 방법으로도 했는데요.게시판이 자동으로 늘어 나지가 않는데요.ex)*.aspx 게시판 문서의 가장 하단에.
</form>
</body>
</HTML>
<script>
if(window != top)
{
self.resizeTo(document.body.scrollWidth, document.body.scrollHeight + 10);
}
</script>와 같이 스크립트를 삽입하고.

게시판이 들어갈 문서에는 아래와 같이 아이 프레임을 삽입한다.
<iframe src="http://localhost/Board/list.aspx" name="list" width="640" height="400" frameborder="0" scrolling="no"></iframe>

위와 같이 하는거 아닌가요? 시간 좀 내주시어 한수 지도 부탁합니다.^^*
blueness (2004-08-01 오전 11:53:40)
질문과 답변게시판에 글 올리신분 아니신가요? ^^
첫번째 방법은 일단 불러오는 페이지(부모페이지)와 iframe안으로 삽입되는 페이지의 도메인이 같아야 합니다.
도메인이 다를 경우는 제가 언급했던 방법을 쓰시면 되겠죠..
하지만 배트맨님의 경우는 list, write, view 등이 전부 각기 다른 페이지이기 때문에 일일이 넣기는 상당히 불편할겁니다.

그래서 첫번째 방법을 쓰셔야 할건데,
iframe의 src를 상대경로로 넣어서 해보세요..
아무래도 도메인이 달라서 iframe에 삽입될 문서에 엑서스를 못하는것 같습니다.

========================================================================================================================

========================================================================================================================

이것저것 실험해보니 Iframe이 좀 희안하게 작동하는데 getElementById를 통해 ID로 접근하면 그 오브젝트가 가르키는 document.body가 Ifame 문서의 것이 아니라 부모의 것을 가르키기 때문이다(희안하기도 하지 =.=)

따라서 일단 ID기반으로 접근하는건 포기해야한다. 가장 유력한 대안은 name이다. 하지만 name을 기반으로는 오브젝트 자체를 얻을 수 없으므로 eval함수를 사용할 수 밖에 없다(머 짜피 Iframe이 IE전용이니 대략 갑시다)

   <Script>
          function resize(tmpObj){
                      tmp.width=eval(tmp.name+".document.body.scrollWidth");
                      tmp.height=eval(tmp.name+".document.body.scrollHeight");
          }
   </script>

너무 쉬운지라 소스를 설명할 가치조차 없지만, 중요한건 name이 반드시 Iframe에 존재해야한다는 점이다.

 <iframe name="test" src="test2.html" onload="resize(this)" scrolling="no"></iframe>

* 그러니까말야 애시당초 왜 저기에 src따위를 쓰는거야. 의미상으로는 href아닐까?
* 아니 그러면 처음부터 test가 가르치는걸 정확히 해주던가. 왜 ID는 안되는거야.
* 에잇, 네이버는 파폭이나 사파리에서도 자동 조절 되던데 그거 또 연구해둬야하는거야!
* 파폭3는 iframe 된다면서, 쓰뎅...이잇..

 

 

 

========================================================================================================================

========================================================================================================================

iframe에 삽입되는 내용에 따라 iframe의 사이즈가 자동으로 변경되는 소스.



두가지의 조건
1. 같은 서버내의 페이지를 iframe으로 삽입하는 경우.
2. 타 사이트의 페이지를 iframe으로 삽입하는 경우.

[같은 서버내의 페이지를 삽입하는 경우]


1. 부모페이지에서 해결하는 방법



<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="xxx.htm" width=650 onload="resizeIframe(this)"></iframe>



2. iframe으로 삽입되는 페이지에서 해결하는 방법



아이프레임으로 삽입되는 페이지의 최하단에 아래내용 삽입
<script>
         document.body.scrollIntoView(true);
         parent.document.all.aaa.height = document.body.scrollHeight;
</script>

부모페이지의 아이프레임 id를 aaa로 맞춤.
<IFRAME id=aaa src="xxx.htm" frameBorder=0 width=0 scrolling=no height=0></IFRAME>



[다른 서버(사이트)의 페이지를 삽입하는 경우]


  1. 물론 다른사이트의 페이지 내용을 수정할수(관리권한이) 있어야 한다.

<부모페이지>
<iframe src="http://www.aaa.com/aaa.htm" frameborder="0" id="aaa" scrolling="no"></iframe>

<타서버 불려올 페이지(http://www.aaa.com/aaa.htm)>
<head>태그사이에 아래의 스크립트 삽입

<script language='JavaScript' type='text/javascript'>
<!--
 function init(){
  var doc = document.getElementById("infodoc");
  doc.style.top=0;
  doc.style.left=0;
  if(doc.offsetHeight == 0){
  } else {
    pageheight = doc.offsetHeight;
    pagewidth = doc.offsetWidth;
    parent.frames["aaa"].resizeTo(pagewidth,pageheight);
  }
 }
//-->
</script>

body의 onLoad태그로 위 스크립트를 불러옴
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="init();">

본문내용을 지정한 id로 감싼다.(infodoc)
<div id='infodoc'>
.
.
.
내용
.
.
.
</div>
</body>

 
반응형
저작자표시

'javascript' 카테고리의 다른 글

new Option() 사용시 하나의 Tip  (0) 2016.01.27
Ajax euc-kr 인코딩 사용  (0) 2016.01.27
window.open() 두번째 인자  (0) 2016.01.27
iframe scroll 깔끔하게 처리하기.  (0) 2016.01.27
window.open 옵션  (0) 2016.01.27
'javascript' Related Articles more