▶▷ 알아두면 좋은 것들
이번글에서는 부모창과 자식창을 연결해서 서로 제어할 수 있도록 해볼거에요.
특히, 'window' 객체 하위의 'opener' 객체를 활용해서 부모창과 자식창에 있는 텍스트 입력란이 서로 텍스트 데이터를 교환해서 출력해보도록 하겠습니다.
방식만 이해한다면, 쉽게 응용할 수 있겠죠?
저 같은 경우는 비록 편법이었지만 이것과 디비를 이용해서 웹에서 대화창을 구성해봤습니다.
다른 것도 알아야 하지만 이것이 핵심 중의 하나였죠 ^^
다음과 같이 opener를 활용할 수 있습니다.
여기서 'opener' 객체는 자기 자신을 연 기존 창의 window 객체를 참조합니다.
그리고 그렇게 얻어진 window 객체로부터 페이지에 접근을 할 수 있죠.
소스를 보며, 같이 알아봅시다 ^^
소스(Source)
두개의 소스가 필요합니다.
자식창과 그 자식창을 열 부모창으로 구성되겠습니다.
두개다 받으셔야 테스트가 가능합니다.
1. 부모창 소스 - 소스다운
Doit.html
<HTML>
<HEAD>
<TITLE>자바스크립트를 활용한 새창과 기존창의 텍스트 가져오기</TITLE>
</HEAD>
<SCRIPT language="javaScript">
1. var newWindow;
function open_Page(){
2. newWindow=window.open("Doit_1.html", "Doit", "height=100,width=200,resizable=yes");
}
function receiver_onclick(){
alert("자식창에 있는 폼의 TEXT를 받아옵니다.");
3. document.frm1.txtReceiver.value=newWindow.document.frm1.txtSender.value;
}
</SCRIPT>
<BODY>
<FORM name=frm1>
<input type=button value="자식창 열기" onclick=open_Page()><br>
4. 부모창 Sender : <input type=text name=txtSender size=10><br>
5. 부모창 Receiver : <input type=text name=txtReceiver size=10><br>
<input type=button value="받아오기" onclick=receiver_onclick()>
</FORM>
</BODY>
2. 자식창 소스 - 소스다운 Doit_1.html
<HTML>
<HEAD>
<TITLE>자바스크립트를 활용한 새창 열기 닫기</TITLE>
</HEAD>
<SCRIPT language="javaScript">
function receiver_onclick(){
alert("부모창에 있는 폼의 TEXT를 받아옵니다.");
6. document.frm1.txtReceiver.value=window.opener.document.frm1.txtSender.value;
}
</SCRIPT>
<BODY>
<FORM name=frm1>
자식창 Sender : <input type=text name=txtSender size=10><br>
자식창 Receiver : <input type=text name=txtReceiver size=10><br>
<input type=button value="받아오기" onclick=receiver_onclick()>
</FORM>
</BODY>
</HTML>
소스설명
1. 새창을 담을 변수 설정
2. 자식창을 활성화
- 새창을 엽니다. 자식창의 파일이름은 'Doit_1.html'이 되겠고, 새창과 관련 내용은 상단의 관련글을 참고해 주세요.
3. 자식창의 텍스트 입력란 Sender로부터 텍스트값 받아오기
- 이부분 역시 BOM을 이용해서 부모창과 자식창의 텍스트 입력란에 접근을 하는데요.
자식창의 window 객체를 담고 있는 변수 'newWindow'를 통해서 접근을 합니다.
4. 부모창 Sender
- 부모창의 Sender 입니다. 자식창 Receiver 에게 보내줄 텍스트를 가집니다.
5. 부모창 Receiver
- 부모창의 Receiver 입니다. 자식창 Sender에게서 텍스트를 받습니다.
6. opener를 통한 자식창으로의 접근
- 3번과 비슷한 부분입니다. 여기서 중요한 것은 역시 opener입니다.
자식창에서 부모창의 window 객체로 접근할 수 있는 것은 opener 가 유일한데요.
이처럼 'opener'를 이용해서 부모객체의 'window' 객체를 참조하고, BOM을 이용해서 원하는 동작을 마무리 합니다.
'open', 새창을 열어보자!
