iframe 높이 조절
페이지 정보
작성자 최고관리자 작성일 21-02-10 17:26 조회 8,411 댓글 0본문
<script>
function ResizeFrame(submain){ // IFRAME 내부의 body 개체
var fBody = document.frames(submain).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 (submain.style.height == "0px" || Frame_name.style.width == "0px") {
fName.style.width = "605px"; //기본 iframe 너비
fName.style.height = "600px"; //기본 iframe 높이
}
}
</script>
<iframe src="http://www.adnec.net/bbs/index.html?code=jyoilseal&kind=10&kor_eng=k" name="submain" onLoad="ResizeFrame('submain');" scrolling="auto" marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 frameborder='0' width='605'></iframe>
############################################################################
=================================[ iframe ]========================= start =======
1.기능
iFrame은 html 문서 내에서 또 다른 html을 불러올 수 있는 기능을 갖고 있습니다. CGI를 불러오거나 공지사항 등에 많이 사용.
2. 소스형식
<head> ....</head>
<body><iframe 옵션></iframe></body> 이렇게 되구요..
3. 실제 예
<BODY>와 </BODY> 태그 사이에 들어갈 소스
<IFRAME WIDTH="450" HEIGHT="300" FRAMEBORDER="yes" SCROLLING="auto" SRC="memo.htm" MARGINWIDTH="10" MARGINHEIGHT="10" NAME="memo" HSPACE="10" VSPACE="10"></IFRAME>
---------------------------------------------------------------------
옵션 : 값 : 설 명
---------------------------------------------------------------------
WIDTH : 픽셀 : iframe의 폭을 지정합니다
---------------------------------------------------------------------
HEIGHT : 픽셀 : iframe의 높이를 지정합니다.
---------------------------------------------------------------------
FRAMEBORDER : yes,no : iframe의 경계선을 나타나게 할 것인지를 결정합니다. yes로 하면 프레임 경계가 나타나고 no로 하면 프레임 경계가 나타나지 않습니다
---------------------------------------------------------------------
SCROLLING : yes,no,auto : yes는 스크롤 바가 항상 나타납니다. no는 내용이 잘리더라도 스크롤 바가 나타나지 않습니다. auto는 iframe의 크기보다 불러온 문서의 내용이 많으면 자동으로 나타납니다.
---------------------------------------------------------------------
SRC : file name : iframe에서 불러올 문서의 경로와 문서의 이름을 지정합니다.
---------------------------------------------------------------------
MARGINWIDTH : 픽셀 : 좌우 여백을 지정합니다.(iframe 안의 여백임)
---------------------------------------------------------------------
MARGINHEIGHT : 픽셀 : 상하 여백을 지정합니다.iframe 안의 여백임.)
---------------------------------------------------------------------
NAME : 이름 : frame의 이름을 지정합니다. name을 이용하면 iframe을 포함하고 있는 문서에서 하이퍼링크를 클릭하면 iframe에 내용이 나타나도록 target을 지정할 수 있습니다.
---------------------------------------------------------------------
HSPACE : 숫자 : 좌우 여백을 지정합니다.(iframe 밖의 여백임.)
---------------------------------------------------------------------
VSPACE : 숫자 : 상하 여백을 지정합니다.(iframe 밖의 여백임.)
---------------------------------------------------------------------
단, 익스플로러 브라우저에서만 지원하는 확장태그죠
4.내용에 따라서 크기가 틀려지는 iframe
게시판이나 html 문서를 아이프레임으로 불러올경우 스크롤바가 생기거나 또는 스크롤바를 없애면 잘려보이는 경우가 생깁니다.
이럴경우 불러오는 문서의 크기에 맞게 아이프레임 크기를 늘려주는 방법입니다.
<첫번째 방법>
아이프레임 이름을 lastword로 지정했을 경우. 아래의 스크립트를 <head></head> 사이에 넣으세요
<script>
function initsize() {
lastword.resizeTo(lastword.document.body.scrollWidth, lastword.document.body.scrollHeight);
}
</script>
<body> 태그에 onLoad="initsize();"를 넣어 주세요
<body bgcolor="#FFFFFF" onLoad="initsize();">
아이프레임 사용예.
<iframe name="lastword" src="URL" width="300" height="250" frameborder="no" scrolling="no"></iframe>
한가지 주의할것은 불러오는 문서와 불러지는 문서가 서로 같은 계정에 있어야만 동작합니다.
<두번째 방법>
또다른 방법으로 불러지는 문서에 직접삽입하는 방법으로 서로 다른계정에 있어도 사용가능합니다.
<script>
function initsize() {
self.resizeTo(document.body.scrollWidth, document.body.scrollHeight);
}
</script>
<body bgcolor="#FFFFFF" onLoad="initsize();">
####### ie 크롬에서 테스트 ###############################
<script language="JavaScript">
<!--
function iframe_size()
{
var iframe_height= document.getElementById('iframe_name').contentWindow.document.body.scrollHeight;
var iframe_width= document.getElementById('iframe_name').contentWindow.document.body.scrollWidth;
document.getElementById('iframe_name').height=iframe_height;
document.getElementById('iframe_name').width=iframe_width;
}
//-->
</script>
<iframe name="iframe_name" id="iframe_name" src="file_name.html" width="672" height="300" frameborder="0" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" scrolling="no" onLoad="iframe_size();"></iframe>
function ResizeFrame(submain){ // IFRAME 내부의 body 개체
var fBody = document.frames(submain).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 (submain.style.height == "0px" || Frame_name.style.width == "0px") {
fName.style.width = "605px"; //기본 iframe 너비
fName.style.height = "600px"; //기본 iframe 높이
}
}
</script>
<iframe src="http://www.adnec.net/bbs/index.html?code=jyoilseal&kind=10&kor_eng=k" name="submain" onLoad="ResizeFrame('submain');" scrolling="auto" marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 frameborder='0' width='605'></iframe>
############################################################################
=================================[ iframe ]========================= start =======
1.기능
iFrame은 html 문서 내에서 또 다른 html을 불러올 수 있는 기능을 갖고 있습니다. CGI를 불러오거나 공지사항 등에 많이 사용.
2. 소스형식
<head> ....</head>
<body><iframe 옵션></iframe></body> 이렇게 되구요..
3. 실제 예
<BODY>와 </BODY> 태그 사이에 들어갈 소스
<IFRAME WIDTH="450" HEIGHT="300" FRAMEBORDER="yes" SCROLLING="auto" SRC="memo.htm" MARGINWIDTH="10" MARGINHEIGHT="10" NAME="memo" HSPACE="10" VSPACE="10"></IFRAME>
---------------------------------------------------------------------
옵션 : 값 : 설 명
---------------------------------------------------------------------
WIDTH : 픽셀 : iframe의 폭을 지정합니다
---------------------------------------------------------------------
HEIGHT : 픽셀 : iframe의 높이를 지정합니다.
---------------------------------------------------------------------
FRAMEBORDER : yes,no : iframe의 경계선을 나타나게 할 것인지를 결정합니다. yes로 하면 프레임 경계가 나타나고 no로 하면 프레임 경계가 나타나지 않습니다
---------------------------------------------------------------------
SCROLLING : yes,no,auto : yes는 스크롤 바가 항상 나타납니다. no는 내용이 잘리더라도 스크롤 바가 나타나지 않습니다. auto는 iframe의 크기보다 불러온 문서의 내용이 많으면 자동으로 나타납니다.
---------------------------------------------------------------------
SRC : file name : iframe에서 불러올 문서의 경로와 문서의 이름을 지정합니다.
---------------------------------------------------------------------
MARGINWIDTH : 픽셀 : 좌우 여백을 지정합니다.(iframe 안의 여백임)
---------------------------------------------------------------------
MARGINHEIGHT : 픽셀 : 상하 여백을 지정합니다.iframe 안의 여백임.)
---------------------------------------------------------------------
NAME : 이름 : frame의 이름을 지정합니다. name을 이용하면 iframe을 포함하고 있는 문서에서 하이퍼링크를 클릭하면 iframe에 내용이 나타나도록 target을 지정할 수 있습니다.
---------------------------------------------------------------------
HSPACE : 숫자 : 좌우 여백을 지정합니다.(iframe 밖의 여백임.)
---------------------------------------------------------------------
VSPACE : 숫자 : 상하 여백을 지정합니다.(iframe 밖의 여백임.)
---------------------------------------------------------------------
단, 익스플로러 브라우저에서만 지원하는 확장태그죠
4.내용에 따라서 크기가 틀려지는 iframe
게시판이나 html 문서를 아이프레임으로 불러올경우 스크롤바가 생기거나 또는 스크롤바를 없애면 잘려보이는 경우가 생깁니다.
이럴경우 불러오는 문서의 크기에 맞게 아이프레임 크기를 늘려주는 방법입니다.
<첫번째 방법>
아이프레임 이름을 lastword로 지정했을 경우. 아래의 스크립트를 <head></head> 사이에 넣으세요
<script>
function initsize() {
lastword.resizeTo(lastword.document.body.scrollWidth, lastword.document.body.scrollHeight);
}
</script>
<body> 태그에 onLoad="initsize();"를 넣어 주세요
<body bgcolor="#FFFFFF" onLoad="initsize();">
아이프레임 사용예.
<iframe name="lastword" src="URL" width="300" height="250" frameborder="no" scrolling="no"></iframe>
한가지 주의할것은 불러오는 문서와 불러지는 문서가 서로 같은 계정에 있어야만 동작합니다.
<두번째 방법>
또다른 방법으로 불러지는 문서에 직접삽입하는 방법으로 서로 다른계정에 있어도 사용가능합니다.
<script>
function initsize() {
self.resizeTo(document.body.scrollWidth, document.body.scrollHeight);
}
</script>
<body bgcolor="#FFFFFF" onLoad="initsize();">
####### ie 크롬에서 테스트 ###############################
<script language="JavaScript">
<!--
function iframe_size()
{
var iframe_height= document.getElementById('iframe_name').contentWindow.document.body.scrollHeight;
var iframe_width= document.getElementById('iframe_name').contentWindow.document.body.scrollWidth;
document.getElementById('iframe_name').height=iframe_height;
document.getElementById('iframe_name').width=iframe_width;
}
//-->
</script>
<iframe name="iframe_name" id="iframe_name" src="file_name.html" width="672" height="300" frameborder="0" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" scrolling="no" onLoad="iframe_size();"></iframe>
댓글목록 0
등록된 댓글이 없습니다.