1. Hidden Frame 사용
======== Default.htm ========
<html>
<head>
<title>테스트페이지</title>
</head>
<!--
테스트용
<frameset rows="80%, 20%" frameborder="1">
-->
<frameset rows="100%, 0%" frameborder="0">
<frame name="mainFrame" src="Main.htm" noresize="true" />
<frame name="hiddenFrame" src="about:blank" noresize="true" />
</frameset>
<body></body>
</html>
======== Main.htm ========
<html>
<head>
<title>사원정보조회</title>
<script language="javascript">
function setEmpData(LastName, FirstName, Title, BirthDate, City) {
document.getElementById("LastName").value = LastName;
document.getElementById("FirstName").value = FirstName;
document.getElementById("Title").value = Title;
document.getElementById("BirthDate").value = BirthDate;
document.getElementById("City").value = City;
}
function GetInfo() {
var empID = document.getElementById("EmpID").value;
top.frames[1].location = "process.asp?EmpID=" + empID;
}
</script>
</head>
<body>
<p>
<table cellpadding="3" width="300" bgcolor="#efefef">
<tr>
<td align=center>사원정보조회</td>
</tr>
</table>
<table cellpadding="3" width="300">
<tr>
<td align=center>사번</td>
<td><input id="EmpID" name="EmpID" type="text" onchange="GetInfo();"></td>
</tr>
<tr height="1" bgcolor="silver"><td colspan="2"></td></tr>
<tr>
<td align=center width="80">이름</td>
<td><input id="LastName" name="LastName" type="text"></td>
</tr>
<tr>
<td align=center>성</td>
<td><input id="FirstName" name="FirstName" type="text"></td>
</tr>
<tr>
<td align=center>직급</td>
<td><input id="Title" name="Title" type="text"></td>
</tr>
<tr>
<td align=center>생일</td>
<td><input id="BirthDate" name="BirthDate" type="text"></td>
</tr>
<tr>
<td align=center>도시</td>
<td><input id="City" name="City" type="text"></td>
</tr>
</table>
</p>
</body>
</html>
======== Process.asp ========
<!--METADATA TYPE="typelib" NAME="ADODB Type Library"
FILE="C:\Program Files\Common Files\SYSTEM\ADO\msado15.dll"-->
<%
Dim Dbcon, Cmd, Rs
Dim strConnect, sql
Dim empID
empID = Request("empID")
if empID = "" then Response.End
strConnect = "Driver={SQL Server}; Server=XXXXXX; database=XXXXXX; uid=XXXXXX; pwd=xxxxxxxx"
Set Dbcon = Server.CreateObject("ADODB.Connection")
Dbcon.Open strConnect
sql = "SELECT LastName, FirstName, Title, BirthDate, City " & _
" FROM Employees WHERE EmployeeID = ?"
Set Cmd = Server.CreateObject("ADODB.Command")
Set Cmd.ActiveConnection = Dbcon
Cmd.CommandText = sql
Cmd.Parameters.Append Cmd.CreateParameter("@employeeID", adInteger, adParamInput, , empID)
Set Rs = Cmd.Execute
If NOT (Rs.EOF Or Rs.BOF) Then
LastName = Rs(0)
FirstName = Rs(1)
Title = Rs(2)
BirthDate = Rs(3)
City = Rs(4)
Else
LastName = "-"
FirstName = "-"
Title = "-"
BirthDate = "-"
City = "-"
End If
Rs.Close
Set Rs = Nothing
Dbcon.Close
Set Dbcon = Nothing
%>
<html>
<head>
<title>Untitled Page</title>
<script language="javascript">
<!--
function pageLoad(){
var LastName = "<%=LastName%>";
var FirstName = "<%=FirstName%>";
var Title = "<%=Title%>";
var BirthDate = "<%=BirthDate%>";
var City = "<%=City%>";
var target;
target = top.frames[0];
target.setEmpData(LastName, FirstName, Title, BirthDate, City);
}
//-->
</script>
</head>
<body onload="pageLoad()"></body>
</html>
2. 정적 IFrame 사용
>>> 숨김Frame 으로 하단 프레임에 접근하기위해선 top.Frames[1] 방식으로 접근해야 했지만
>>> IFrame 같은 경우는 페이지 내부에 개체 요소로 존재하기에 document.getElementById("hiddenFrame") 방식으로 접근
>>> IFrame을 사용하는 경우는 프레임이 존재하지 않게 되므로 top.frames[0] 방식 사용불가 top 혹은 parent
======== Main.htm ========
*** 해당 페이지내 스크립 변경 ***
function GetInfo() {
var empID = document.getElementById("EmpID").value;
// top.frames[1].location = "process.asp?EmpID=" + empID;
document.getElementById("hiddenFrame").src = "Process.asp?EmpID=" + empID;
}
=============================
하단부 BODY 내 빈 IFrame 추가
<iframe id="hiddenFrame" width="0" height="0" FrameBorder="0"></iframe>
======== Process.asp ========
*** 해당 페이지 내 스크립트 변경 ***
var target;
//target = top.frames[0];
//프레임 점근방식 고민 : top와 parent의 차이
//복잡한 프레임일시 parent 사용이 더 수월
if(top.frames.length == 2) //프레임이 나누어져있을때
target = top.frames[0];
else //프레임이 없을때
target = top;
target.setEmpData(LastName, FirstName, Title, BirthDate, City);
=============================
3. 동적 IFrame 사용
>> 해당 방식의 장점은 페이지 레이아웃을 건드리지 않고 스크립트를 통해 처리하므로 페이지 디자인과 로직을 분리할수 있다는 것 이 장점이다.
======== Main.htm ========
*** 해당 페이지내 스크립 변경 ***
function GetInfo() {
if(!oFrame) createIFrame();
var empID = document.getElementById("EmpID").value;
oFrame.src = "Process.asp?EmpID=" + empID;
}
//동적으로 IFrame을 추가 >> 실제화면페이지 설정없이 UI & 기능을 동적으로추가
var oFrame = null;
function createIFrame(){
oFrame = document.createElement("iframe");
oFrame.width = "0";
oFrame.height = "0";
oFrame.frameBorder = "0";
document.body.appendChild(oFrame);
}
===========================