티스토리 뷰
■ IFRAME
<iframe
src="" // 연결될 주소
frameborder="" // 테두리 ex) 0:사용안함 / 1:사용
width="" // 가로크기 ex) 100% / 100px
height="" // 세로크기 ex) 100% / 100px
scrolling="" // 스크롤바 사용 여부 ex) yes / no / auto
align="" // 내부 페이지 정렬 방식 ex) center / left / right
name="" // iframe 이름 ( target 지정시 사용 )
id="" // iframe id ( script 에서 사용 )
hspace="" // 기준이되는 곳으로 부터 iframe 의 가로위치
vspace="" // 기준이되는 곳으로 부터 iframe 의 세로위치
marginwidth="" // 가로 여백
marginheight="" // 세로 여백
style="zoom:100%" // 원본 페이지 : 출력페이지 비율 조정
></iframe>
예제
<iframe name="ifame_test" src="페이지주소" frameborder="0" width="100% height="100%" scrolling="auto" align="center"></iframe>
응용
<script>
function set_iframe() {
document.getElementById("iframe_test").src="페이지주소";
}
function reset_iframe() {
document.getElementById("iframe_test").src="페이지주소";
}
</script>
<a onMouseOver="set_iframe()" onMouseOut="reset_iframe()">마우스오버</a>
==================================================================================
# onLoad / onChange - 는 안되고 onLoad 로 해야함
function iframeOnLoad(obj) {
obj.width = obj.contentWindow.document.body.scrollWidth;
obj.height = obj.contentWindow.document.body.scrollHeight + 20;
}
<iframe name="main" id="frame" frameBorder="0" src="/miniGallery/gallery.php" onLoad="iframeOnLoad(this)"></iframe>
==================================================================================
<HTML>
<HEAD>
<title>::신화블루베리농장 관리자모드::</title>
<SCRIPT language="javascript" type="text/javascript" src="/login@admin/_js/mTree.js"></SCRIPT>
<SCRIPT language="javascript" type="text/javascript">
<!--
function iframeChange() {
var width = document.body.clientWidth; // 현재 창의 width
var height = document.body.clientHeight; // 현재 창의 height
var objWidth = width - 200; // 현재 창에서 LEFT 크기 빼기
var objHeight = height - 100 - 20; // 현재 창에서 TOP 크기 빼기
document.getElementById("frame").width = objWidth;
document.getElementById("frame").height = objHeight;
}
-->
</SCRIPT>
</HEAD>
<BODY onLoad="iframeChange()" onResize="iframeChange()" style="margin:0px; padding:0px; font-size:12px; color:#666666; overflow:auto;">
<table cellpadding="0" cellspacing="5" border="1" borderColor="#DDDDDD" style="font-size:12px; border:1px solid #DDDDDD; width:100%; height:100%;">
<tr>
<td valign="top" colspan="2" height="100">TOP</td>
</tr>
<tr>
<td valign="top" width="200"><? include $_SERVER[DOCUMENT_ROOT]."/login@admin/leftMenu.php"; ?></td>
<td valign="top"><iframe name="main" id="frame" frameBorder="0"></iframe></td>
</tr>
</table>
</BODY>
</HTML>
==================================================================================
# 투명배경
1. IFRAME 를 불러올 <body> 스타일을 아래와 같이 수정한다.
<body style="background-color : transparent">
2. IFRAME 속성을 아래와 같이 추가한다.
<iframe allowTransparency="true"></iframe>
추가 불투명으로 하고자 할 경우
style="filter: Alpha(Opacity=35);"
'Language > HTML' 카테고리의 다른 글
| [ HTML ] INPUT | RADIO | CHECKBOX (0) | 2016.03.05 |
|---|---|
| [ HTML ] 자동 줄바꿈을 통한 테이블 크기 고정 (0) | 2016.01.02 |
| [ HTML ] 편집용 iframe 창에 작성된 내용 textarea 로 복사 방법 - WYSIWYG(위지윅) 에디터 제작 기초 - 확인전 (0) | 2016.01.02 |
| [ HTML ] 편집용 iframe 창에 스타일 지정하는 방법 - WYSIWYG(위지윅) 에디터 제작 기초 - 확인전 (0) | 2016.01.02 |
| [ HTML ] WYSIWYG(위지윅) 에디터 제작 기초 - 확인전 (0) | 2016.01.02 |