묻고답하기
아이프레임(iframe) 자동 높이 조절 하는 법 좀 도와주세요
2014.10.26 21:07
노프레임 기반 홈페이지 입니다.
제로보드 게시판에 쓴 글의 길이에 따라 게시판만 쭉 늘어났으면 좋겠는데(스크롤바 없ㅇ. 스크롤바는 맨 오른쪽에 딱 하나만 있으면 됩니다.) 다른 지식인 질문에 올려놓은 소스를 첨부해보고 그래도 게시판의 길이가 늘어나지 않아요ㅠㅠㅠ
어떻게 해야 게시판만 늘어나게 할 수 있는지 모르겠어요...
소스 첨부합니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
< html>
< head><body oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
< title></title>
< div align="center"><p><img src="head.jpg" width="800" height="300" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="160,74,639,158" href="index.htm">
<area shape="rect" coords="316,219,388,265" href="Diary.htm">
<area shape="rect" coords="454,225,561,271" href="Guest.htm">
<area shape="rect" coords="617,225,748,267" href="Link.htm">
<area shape="rect" coords="48,225,124,262" href="publishserially.htm">
<area shape="rect" coords="176,223,259,264" href="complete.htm">
</map>
</p>
</p>
<table width="1000" border="0" bordercolor="#FFFFFF" bgcolor="#FFFFFF">
<tr>
<td width="889" align="center" valign="top" bordercolor="#FFFFFF" bgcolor="#FFFFFF"><p><iframe src="http://h128.dothome.co.kr/bbs/view.php?id=Index&page=1&sn1=&divpage=1&sn=off&ss=on&sc=on&select_arrange=headnum&desc=asc&no=1" width="1000px" height="1000px" marginwidth="0px"marginheight="0px" frameborder="no" scrolling="no" align="center" onload="autoResize(this)"></iframe>
</tr>
</table>
<p><img src="foot.png" width="700" height="50"></p>
< /div>
< /body>
< /html>
댓글 6
-
서방서방
2014.10.27 15:08
-
해오름달스물여드레
2014.10.27 19:49
이 소스를 원본소스의 어디쯤에 넣어야하나요?? -
서방서방
2014.10.28 11:39
원본 소스에 보시면 onload="autoResize(this)" 이 부분이 있는데 스크립트 부분은 빼고 다른 곳에서 긁어 오신듯 하시네요
기존 소스에서 복사하신거면 javascript에 autoResize function 을 같이 넣어주시면 되구요
제가 드린 소스 사용하신다면
<head>
<script type="text/javascript">
function getDocHeight(doc) {
doc = doc || document;
var body = doc.body, html = doc.documentElement;
var height = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
return height;
}function setIframeHeight(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument ? ifrm.contentDocument :
ifrm.contentWindow.document;
ifrm.style.visibility = "hidden";
ifrm.style.height = "10px";
ifrm.style.height = getDocHeight(doc) + 4 + "px";
ifrm.style.visibility = "visible";
}</script>
</head>
헤더부분에 추가 해주시고
iframe에 onload 부분을 setIframeHeight(this.id)으로 변경해주시면 됩니다.
-
해오름달스물여드레
2014.10.28 20:45
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><script type="text/javascript">
function getDocHeight(doc) {
doc = doc || document;
var body = doc.body, html = doc.documentElement;
var height = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
return height;
}function setIframeHeight(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument ? ifrm.contentDocument :
ifrm.contentWindow.document;
ifrm.style.visibility = "hidden";
ifrm.style.height = "10px";
ifrm.style.height = getDocHeight(doc) + 4 + "px";
ifrm.style.visibility = "visible";
}</script>
</head>
<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
<title></title>
<div align="center">
<p><img src="head.jpg" width="800" height="300" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="160,74,639,158" href="index.htm">
<area shape="rect" coords="316,219,388,265" href="Diary.htm">
<area shape="rect" coords="454,225,561,271" href="Guest.htm">
<area shape="rect" coords="617,225,748,267" href="Link.htm">
<area shape="rect" coords="48,225,124,262" href="publishserially.htm">
<area shape="rect" coords="176,223,259,264" href="complete.htm">
</map></p>
<table width="1000" border="0" bordercolor="#FFFFFF" bgcolor="#FFFFFF">
<tr>
<td width="889" align="center" valign="top" bordercolor="#FFFFFF" bgcolor="#FFFFFF"><p><iframe src="http://h128.dothome.co.kr/bbs/view.php?id=Index&page=1&sn1=&divpage=1&sn=off&ss=on&sc=on&select_arrange=headnum&desc=asc&no=1" width="1000px" height="1200px" marginwidth="0px"marginheight="0px" frameborder="no" scrolling="no" align="center" onload="setIframeHeight(this.id)"></iframe>
</tr>
</table>
<p><img src="foot.png" width="700" height="50"></p>
</div>
</body>
</html>이렇게 수정하는게 맞나요??...결과물이 더 이상하게 변했어요...ㅠㅠ
그리고 전 아예 헤더나 푸터 html파일을 만들지 않고 홈페이지를 만들었어요
-
외부 서버에 있는 페이지를 불러오는건 원칙적으로 높이 자동 조절이 안됩니다.
위 소스는 같은 서버에 있다는 조건 하에서 가능한겁니다.
위 소스로 자동 높이 조절이 안된다면 외부서버의 페이지나 게시판을 불러 오는게 아닌가 싶네요.
-
해오름달스물여드레
2014.10.28 22:42
그럼 이 홈페이지 이대로는 아예 방법이 없는건가요...ㅜㅜ
function getDocHeight(doc) {
doc = doc || document;
var body = doc.body, html = doc.documentElement;
var height = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
return height;
}
function setIframeHeight(id) {
var ifrm = document.getElementById(id);
var doc = ifrm.contentDocument ? ifrm.contentDocument :
ifrm.contentWindow.document;
ifrm.style.visibility = "hidden";
ifrm.style.height = "10px";
ifrm.style.height = getDocHeight(doc) + 4 + "px";
ifrm.style.visibility = "visible";
}
<iframe id="ifrm" src="" style="height:100%;width:100%;" frameborder="0" onload="setIframeHeight(this.id)"></iframe>