iframe의 높이 자동조절 관련해서 문의드립니다.
본문
일반적인 아이프레임은 많이 널려있는 아이프레임 높이 조절 소스로 가능합니다.
작업한 스킨 페이지 자체가 리스트와 뷰페이지가 동시에 붙어있다보니 이 자동 높이 조절이 먹히지 않는 경우가 있습니다.
뷰페이지에 있는 이미지의 height값을 받아와서 이 값을 iframe의 height값으로 만드려고 하는데
이 부분을 적용이 제대로 되지 않아 이렇게 글을 올립니다.
뷰페이지에 있는 이미지의 height값을 iframe에 적용시키려면 어떤 방법이 필요할까요?
작업한 스킨 페이지 자체가 리스트와 뷰페이지가 동시에 붙어있다보니 이 자동 높이 조절이 먹히지 않는 경우가 있습니다.
뷰페이지에 있는 이미지의 height값을 받아와서 이 값을 iframe의 height값으로 만드려고 하는데
이 부분을 적용이 제대로 되지 않아 이렇게 글을 올립니다.
뷰페이지에 있는 이미지의 height값을 iframe에 적용시키려면 어떤 방법이 필요할까요?
//스킨 페이지 불러오는 곳
<?include "../include/header_sub.php"?>
<div id="page_board">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="ifboard"><script>
function doResize()
{
ifboard.height = myframe.document.body.scrollHeight;
ifboard.width = myframe.document.body.scrollWidth;
}
</script>
<? if($wr_id){
$str_src="../../admin/bbs/board.php?bo_table=story2&wr_id=".$wr_id;
}
else{
$str_src="../../admin/bbs/board.php?bo_table=story2";
}
?>
<iframe src="<?=$str_src?>" name="myframe" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="no" onload="doResize()"></iframe></td>
</tr>
</table>
</div>
<? include "../include/footer_sub.php"; ?>
//list.skin.php
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
// 선택옵션으로 인해 셀합치기가 가변적으로 변함
//$colspan = 9;
if ($is_category) $colspan++;
if ($is_checkbox) $colspan++;
if ($is_good) $colspan++;
if ($is_nogood) $colspan++;
// 제목이 두줄로 표시되는 경우 이 코드를 사용해 보세요.
// <nobr style='display:block; overflow:hidden; width:000px;'>제목</nobr>
?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<style type="text/css">
.blue
{
color:blue;
font-weight:bold;
}
.high
{
color: aqua;
}
td.entitle:active {color: #fd9b07}
td font.dandy:active {color: #fd9b07}
td font.dandy:visited {color: #fd9b07}
font.dandy:focus {color: #fd9b07}
font.dandy:link {color: black}
font.dandy:active {color: #fd9b07}
</style>
<table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td height=10></td></tr></table>
<!-- 제목 -->
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<form name="fboardlist" method="post">
<input type="hidden" name="bo_table" value="<?=$bo_table?>">
<input type="hidden" name="sfl" value="<?=$sfl?>">
<input type="hidden" name="stx" value="<?=$stx?>">
<input type="hidden" name="spt" value="<?=$spt?>">
<input type="hidden" name="page" value="<?=$page?>">
<input type="hidden" name="sw" value="">
<? if ($is_admin) { ?><tr><td height=30 colspan='<?=$board[bo_gallery_cols]?>' style='padding-left:20px;'><INPUT onclick="if (this.checked) all_checked(true); else all_checked(false);" type=checkbox> 전체선택</td></tr><? } ?>
<tr>
<?
for ($i=0; $i<count($list); $i++)
{
$title = "자세히보기";
$content = cut_str(get_text($list[$i][wr_content]), 180);
$subject = cut_str(get_text($list[$i][subject]), 100, '...');
$img_width = '160'; // 이미지 개당 가로크기
$img_height = '120'; // 이미지 개당 세로크기
$img = "$g4[path]/data/file/$bo_table/".urlencode($list[$i][file][0][file]);
$img2 = "$g4[path]/data/file/$bo_table/".urlencode($list[$i][file][1][file]);
$adj_height = $list[$i][file][1][image_height];
$adj_index = $list[$i][wr_id];
if (!file_exists($img) || !$list[$i][file][0][file])
$img = "$board_skin_path/img/no_image.gif";
if ($is_admin)
$view_href = "$g4[bbs_path]/board.php?bo_table=$bo_table&wr_id={$list[$i][wr_id]}";
else
$view_href = "#";
$checkbox = "";
if ($is_checkbox)
$checkbox = "<input type=checkbox name=chk_wr_id[] value='{$list[$i][wr_id]}'>";
$tr = "";
if ($i && $i%$board[bo_gallery_cols]==0)
$tr = "</tr><tr>";
echo "$tr";
echo <<<HEREDOC
<td width="{$td_width}%" valign="top" align="center" >
<table width="200" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<img src="{$img}" width='{$img_width}' height='{$img_height}' border="0" title="$title" style="border:0px solid #000000;cursor:pointer;" class="test" onClick="view_img2('$img2','$adj_height')" data-param="$i">
</td>
</tr>
<tr>
<td align="center" class="test2" style="cursor:pointer;" onClick="view_img2('$img2','$adj_height', '$adj_index')" data-param="$i">{$checkbox} <font id="dandy$i" class="dandy" value="$i" data-param="$i">{$subject}</font></td>
</tr>
</table>
</td>
HEREDOC;
}
// 나머지 td 를 채운다.
if ($i == 0)
echo "<td colspan='$board[bo_gallery_cols]' height=50 align=center>게시물이 없습니다.</td>";
?>
</form>
</tr>
</table>
<!-- 분류 셀렉트 박스, 게시물 몇건, 관리자화면 링크 -->
<table width="100%" border="0" cellpadding="1" cellspacing="0" style='border-top:1px solid #ffffff;border-bottom:1px solid #cccccc;'>
<tr height="28">
<? if ($is_category) { ?><form name="fcategory" method="get"><td width="50%"><select name=sca onchange="location='<?=$category_location?>'+this.value;"><option value=''>전체</option><?=$category_option?></select></td></form><? } ?>
<? if ($is_admin) { ?><td align="right">게시물 <?=number_format($total_count)?>건</td><? } ?>
</tr>
</table>
<!-- 페이지 -->
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td height="37" align="center" background="<?=$board_skin_path?>/img/number_line.gif">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="center">
<? if ($prev_part_href) { echo "<a href='$prev_part_href'><img src='$board_skin_path/img/btn_search_prev.gif' width=54 height=18 border=0 align=absmiddle title='이전검색'></a>"; } ?>
<?
// 기본으로 넘어오는 페이지를 아래와 같이 변환하여 이미지로도 출력할 수 있습니다.
//echo $write_pages;
$write_pages = str_replace("처음", "<img src='$board_skin_path/img/begin.gif' border='0' align='absmiddle' title='처음'>", $write_pages);
$write_pages = str_replace("이전", "<img src='$board_skin_path/img/prev.gif' border='0' align='absmiddle' title='이전'>", $write_pages);
$write_pages = str_replace("다음", "<img src='$board_skin_path/img/next.gif' border='0' align='absmiddle' title='다음'>", $write_pages);
$write_pages = str_replace("맨끝", "<img src='$board_skin_path/img/end.gif' border='0' align='absmiddle' title='맨끝'>", $write_pages);
$write_pages = preg_replace("/<span>([0-9]*)<\/span>/", "<font style=\"font-family:Tahoma, Seoul,굴림; font-size:10pt; color:#797979\">$1</font>", $write_pages);
$write_pages = preg_replace("/<b>([0-9]*)<\/b>/", "<font style=\"font-family:Tahoma, Seoul,굴림; font-size:10pt; color:orange;\">$1</font>", $write_pages);
?>
<strong><?=$write_pages?></strong>
<? if ($next_part_href) { echo "<a href='$next_part_href'><img src='$board_skin_path/img/btn_search_next.gif' width=54 height=18 border=0 align=absmiddle title='다음검색'></a>"; } ?>
</td>
</tr>
</table></td>
</tr>
</table>
<!-- 버튼 링크 -->
<div class="board_button">
<div style="float:left;">
<? if ($list_href) { ?>
<a href="<?=$list_href?>"><img src="<?=$board_skin_path?>/img/btn_list.gif" align="absmiddle" border='0'></a>
<? } ?>
<? if ($is_checkbox) { ?>
<a href="javascript:select_delete();"><img src="<?=$board_skin_path?>/img/btn_select_delete.gif" align="absmiddle" border='0'></a>
<a href="javascript:select_copy('copy');"><img src="<?=$board_skin_path?>/img/btn_select_copy.gif" align="absmiddle" border='0'></a>
<a href="javascript:select_copy('move');"><img src="<?=$board_skin_path?>/img/btn_select_move.gif" align="absmiddle" border='0'></a>
<? } ?>
</div>
<div style="float:right;">
<? if ($write_href) { ?><a href="<?=$write_href?>"><img src="<?=$board_skin_path?>/img/btn_write.gif" border='0'></a><? } ?>
</div>
</div>
</td></tr></table>
<!-- 게시판 목록 시작 -->
<table width="<?=$width?>" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="800" border="0" cellpadding="0" cellspacing="0" align="center" >
<tr>
<td width="800" height="$adj_height" Style="background:#fff;" id="contents"><img class="main_img" src="<?=$list[0][file][0][path]?>/<?=$list[0][file][1][file]?>" width="800" id="main_img"></td>
</tr>
</table>
</td>
</tr>
</table>
<script language="JavaScript">
if ("<?=$sca?>") document.fcategory.sca.value = "<?=$sca?>";
if ("<?=$stx?>") {
document.fsearch.sfl.value = "<?=$sfl?>";
document.fsearch.sop.value = "<?=$sop?>";
}
function view_img(img2){
document.getElementById("main_img").src = img2;
}
function view_img2(img2, hh, adj_index){
document.getElementById("main_img").src = img2;
$('#main_img').css('height',hh); //가로는 800고정, 높이를 원본으로 할 때
// $('#main_img').css({'width':ww,'height':hh}); //가로 세로 모두 원본크기로 변경할 때
//선택된 index값과 비교해서 Class를 추가하는 루틴이 필요하다.
//alert(adj_index); //adj_index는 현재 선택한 값
}
var g_a = "";
$(document).ready(function(){
/*
$("#dandy0").css("color","#fd9b07"); // 해당 id에 width를 200으로 수정..
$("#dandy0").css("font-weight","bold");
*/
$(".test").click( function() { // test라는 클래스 클릭시..
var parm = $(this).attr("data-param");
//alert( parm ); // 클릭된 parm 값을 경고창으로 찍어보고 해당숫자를 이용해서 고유의 id값 뒤에 넣어주고...
var a = "#dandy"+parm; // id
var b = "#dandy"+g_a; // 전역변수에 저장한 id
if( g_a != "" ) { // 전역변수에 값이 있을때만.. 실행
$(b).css("color","black"); // 해당 id에 width를 100으로 수정..
$(b).css("font-weight","normal");
}
$(a).css("color","#fd9b07"); // 해당 id에 width를 200으로 수정..
$(a).css("font-weight","bold");
g_a = parm; // 전역변수에 클릭한 값을 저장
});
$(".test2").click( function() { // test라는 클래스 클릭시..
var parm = $(this).attr("data-param");
//alert( parm ); // 클릭된 parm 값을 경고창으로 찍어보고 해당숫자를 이용해서 고유의 id값 뒤에 넣어주고...
var a = "#dandy"+parm; // id
var b = "#dandy"+g_a; // 전역변수에 저장한 id
if( g_a != "" ) { // 전역변수에 값이 있을때만.. 실행
$(b).css("color","black"); // 해당 id에 width를 100으로 수정..
$(b).css("font-weight","normal");
}
$(a).css("color","#fd9b07"); // 해당 id에 width를 200으로 수정..
$(a).css("font-weight","bold");
g_a = parm; // 전역변수에 클릭한 값을 저장
});
});
</script>
<script type="text/javascript" src="<?="$g4[path]/js/board.js"?>"></script>
<script type="text/javascript">
window.onload=function() {
resizeBoardImage(<?=(int)$board[bo_image_width]?>);
//drawFont();
}
</script>
<? if ($is_checkbox) { ?>
<script language="JavaScript">
function all_checked(sw)
{
var f = document.fboardlist;
for (var i=0; i<f.length; i++) {
if (f.elements[i].name == "chk_wr_id[]")
f.elements[i].checked = sw;
}
}
function check_confirm(str)
{
var f = document.fboardlist;
var chk_count = 0;
for (var i=0; i<f.length; i++) {
if (f.elements[i].name == "chk_wr_id[]" && f.elements[i].checked)
chk_count++;
}
if (!chk_count) {
alert(str + "할 게시물을 하나 이상 선택하세요.");
return false;
}
return true;
}
// 선택한 게시물 삭제
function select_delete()
{
var f = document.fboardlist;
str = "삭제";
if (!check_confirm(str))
return;
if (!confirm("선택한 게시물을 정말 "+str+" 하시겠습니까?\n\n한번 "+str+"한 자료는 복구할 수 없습니다"))
return;
f.action = "./delete_all.php";
f.submit();
}
// 선택한 게시물 복사 및 이동
function select_copy(sw)
{
var f = document.fboardlist;
if (sw == "copy")
str = "복사";
else
str = "이동";
if (!check_confirm(str))
return;
var sub_win = window.open("", "move", "left=50, top=50, width=396, height=550, scrollbars=1");
f.sw.value = sw;
f.target = "move";
f.action = "./move.php";
f.submit();
}
</script>
<? } ?>
<!-- 게시판 목록 끝 -->
답변을 작성하시기 전에 로그인 해주세요.
