'opener', 부모창과 자식창의 텍스트를 교환하자!

by 조쉬 posted Feb 03, 2015
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

▶▷ 알아두면 좋은 것들

 

 이번글에서는 부모창과 자식창을 연결해서 서로 제어할 수 있도록 해볼거에요.

특히, 'window' 객체 하위의 'opener' 객체를 활용해서 부모창과 자식창에 있는 텍스트 입력란이 서로 텍스트 데이터를 교환해서 출력해보도록 하겠습니다.

 

 방식만 이해한다면, 쉽게 응용할 수 있겠죠?

저 같은 경우는 비록 편법이었지만 이것과 디비를 이용해서 웹에서 대화창을 구성해봤습니다.

다른 것도 알아야 하지만 이것이 핵심 중의 하나였죠 ^^

 

 다음과 같이 opener를 활용할 수 있습니다.

window.opener.document.frm1.txt.value;

 여기서 '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>

</HTML>


 

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. 새창을 담을 변수 설정

var newWindow;

 

2. 자식창을 활성화

newWindow=window.open("Doit_1.html", "Doit", "height=100,width=200,resizable=yes");

- 새창을 엽니다. 자식창의 파일이름은 'Doit_1.html'이 되겠고, 새창과 관련 내용은 상단의 관련글을 참고해 주세요.

 

3. 자식창의 텍스트 입력란 Sender로부터 텍스트값 받아오기

document.frm1.txtReceiver.value=newWindow.document.frm1.txtSender.value;

- 이부분 역시 BOM을 이용해서 부모창과 자식창의 텍스트 입력란에 접근을 하는데요.

자식창의 window 객체를 담고 있는 변수 'newWindow'를 통해서 접근을 합니다.

 

4. 부모창 Sender

부모창 Sender : <input type=text name=txtSender size=10>

- 부모창의 Sender 입니다. 자식창 Receiver 에게 보내줄 텍스트를 가집니다.

 

5. 부모창 Receiver

부모창 Receiver : <input type=text name=txtReceiver size=10>

- 부모창의 Receiver 입니다. 자식창 Sender에게서 텍스트를 받습니다.

 

6. opener를 통한 자식창으로의 접근

document.frm1.txtReceiver.value=window.opener.document.frm1.txtSender.value;

- 3번과 비슷한 부분입니다. 여기서 중요한 것은 역시 opener입니다.

자식창에서 부모창의 window 객체로 접근할 수 있는 것은 opener 가 유일한데요.

이처럼 'opener'를 이용해서 부모객체의 'window' 객체를 참조하고, BOM을 이용해서 원하는 동작을 마무리 합니다.