자식창과 부모창의 관계, iframe 내부와 메인페이지와의 관계제어

javascript 에서 새로 띄운 자식창과 부모창, iframe 내부와 메인페이지간의 제어 방법에 대한

다양한 예제를 학습해본다.

 

1. 자식창에서 부모창의 특정 Form 에 데이터를 집어넣고 싶을 때

자식창에서 부모창을 가리킬 때 opener 객체를 사용한다. document.Form.input 은 부모창에

속해있는 요소이다.

opener.document.Form.input.value = “값”;

 

2. 자식창에서 부모창의 페이지를 이동시키고 싶을 때

부모창을 원하는 페이지로 이동시킨후 자식창(자기자신) 은 닫는다.

window.opener.location.href = “/admin/login.jsp” ;

window.close();

 

3. 자식창에서 부모창을 새로고침하고 싶을 때

if (!opener.closed){

           opener.document.location.reload();

           window.close();

}

 

4. iframe 내부에서 외부에 있는 메인페이지의 특정 Form 에 값을 집어넣고 싶을 때

iframe 에서 메인을 가리킬때는 parent 객체로 접근한다.

parent.Form.input.value = “값”;

 

5. iframe 내부에서 외부에 있는 메인페이지의 스크립트 함수를 실행하고자 할 때

parent.[메인함수명]

parent.DoSend();

 

6. 메인에서 iframe 의 페이지를 이동시키고 싶을 때

[iframe 이름].location.href

frame.location.href=”www.naver.com”;

<iframe name=”frame”>

####

</iframe>

 

7. 위의 2가지 경우를 섞은것이다. 부모창의 iframe 에서 새창을 하나 띄웠다.

자식창에서 부모창의 페이지를 이동하고 싶은것이다.

이것은 부모창의 iframe 에 갔다가 메인으로 다시 이동해야한다.

2가지의 방법이 있는데 첫번째는 window.opener 를 호출하여 iframe으로간뒤

parent 로 메인에 접근한다.

window.opener.parent.location.href = “URL”;

 

두번째는 top 을 이용해서 부모창을 바로 찾는것이다

top.opener.location.href = “URL”;