프레임셋(Frameset)과 자바스크립트(Javascript)

n       프레임과 자바 스크립트

  자바 스크립트로 프레임을 제어하기 위해서는 자바 스크립트가 프레임을 어떻게 보고 있는지 알아야 한다.  우리는 앞에서, 자바 스크립트가 한 윈도우 내에서 웹 페이지의 각 요소를 계층적으로 표현하고 있음을 배웠다. 이러한 개념은 프레임에도 그대로 적용되어 프레임 객체는 윈도우가 가지는 속성과 메쏘드를 그대로 사용한다.

아래와 같이 상,하 2개의 프레임으로 나누었을 경우를 예로 들어 보자.

 

Jscript4-2.html

<HTML> <HEAD><TITLE>Frame 나누기</TITLE></HEAD> <FRAMESET ROWS="50%, 50%">   <FRAME SRC="frm1.html" NAME="frame1">   <FRAME SRC="frm2.html NAME="frame2"> </FRAMESET> </HTML>

 

 

 

예제 jscript4-2.html 의 프레임 구조도를 도식화하면 위 그림과 같다.  최상위 객체로 브라우저 window 객체가 존재하며 그 아래에 자식(child) 프레임이 위치하게 되는 것이다.  따라서, 부모 객체인 window 는 자식 프레임 frame1과 frame2에 쉽게 접근할 수 있으며, 자식 프레임 또한 부모 윈도우 객체를 가리키는 parent를 이용하여 서로 접근할 수 있다.

 

•       Parent window/frame accesses child frame
•       Child frame accesses parent window/frame
•       Child frame accesses another child frame

 

¨          부모 윈도우에서 자식 프레임 frame2를 호출하는 경우

- frame2.document.write(“이건 부모 윈도우에서 하위 프레임에 쓴 것!”);

 

¨          부모 윈도우에 새로운 페이지가 로드 되도록 하는 경우

- parent.location!.href = “http://www.easycom.co.kr”;

 

¨          frame1에서 frame2를 호출할 경우

- parent.frame2.document.write(“frame1이 frame2를 호출한 것입니다.”);

 

  아래 예제를 통해서 프레임 상호간의 호출과 데이터 교환 방법을 알아보도록 하자.

 

page1.html : 다른 프레임 속성 접근 예제

<HTML> <HEAD><TITLE>Frame 1</TITLE> <SCRIPT Language="JavaScript"> <!-- function showValue() {    var val = document.myform.inputtext.value;    alert(!'당신은 ' + val + ' 를(을)입력했습니다'); } // --> </SCRIPT> </HEAD> <BODY> <CENTER> 입 력 :  <FORM NAME="myform">    <INPUT TYPE="text" NAME="inputtext">  </FORM> </CENTER> </BODY> </HTML>

page2.html

<HTML> <HEAD><TITLE>Frame 2</TITLE> <SCRIPT Language="JavaScript"> <!-- function check() {    parent.upper.showValue(); } // --> </SCRIPT> </HEAD> <BODY> <CENTER>  <FORM NAME="myform">    <INPUT TYPE="button" VALUE="Check Value" onClick="check()">  </FORM> </CENTER> </BODY> </HTML>

 

Jscript4-3.html : 프레임 상호간 호출 예제

<HTML> <HEAD><TITLE>Frame 상호간 호출 예제</TITLE></HEAD> <FRAMESET ROWS="50%, 50%">   <FRAME SRC="page1.html" NAME="upper">   <FRAME SRC="page2.html” NAME="bottom"> </FRAMESET> </HTML>

 

 

[화면] Jscript4-3.html 실행 결과

 

  실행 결과에서 볼 수 있듯이 하단프레임(‘bottom’)에서 상단프레임(‘upper’)의 함수를 호출함으로써 상단프레임의 입력박스에 입력된 데이터 값을 읽어내고 있다.