팝업 창 만들기. window 창 <=> 자식 창 : 데이터 주고 받기

[ 브라우저 관련 내장된 객체 ]

[ window - 창  객체 ]
=> 팝업으로 자식창 만들고, 부모창과 데이터 주고받게 해줌

 

(1) 새 창(웹브라우저) 만들기 

window.onload = function(){
document.getElementById("openWindow").onclick =
function(){
window.open ( "newPage.html",  "new page", "width=400, height=500, left=50, top=50, resizable=yes, location=yes");
    }    }

open ( "오픈할 html파일 / URL",  "창제목title", 
"넓이, 높이, x위치, y위치, resizable, location );

 

resizable => 크기조정 
location => 주소보여줌 


- 원래 창 : 부모 
     새 창 : 자식 
=> 부모창은 자식창을 제어 할 수 있다. 
( 만들수도, 지울수도 ) 


(2) 새 창 닫기 

document.getElementById("closeWindow").onclick =
    function(){
    window.close();    }

=> window : 현재 창 
=> 이렇게하면 부모 창을 닫는 것. 
( 현재 HTML은 부모 창의 HTML 이므로, window 는 부모창을 지칭 )

 

window.onload = function(){
let childWindow;    // 전역으로 빼두기

document.getElementById("openWindow").onclick =
function(){
childWindow = window.open("newPage.html", "new page", "width=400, height=500, left=50, top=50, resizable=yes, location=yes");
    }    }

=> 자식창을 변수에 담고 (전역변수로)

document.getElementById("closeWindow").onclick =
    function(){
    childWindow.close( );    }

=> 자식창 닫기 


이렇게 부모창(window), 자식창( 변수명 ) 을 이용해서 

window.alert("hi window");
cildWindow.alert( "hi ChildWindow " ); 

작업할 창을 선택해서 수행할 수 있다. 




< 부모창 - 자식창 간 데이터 주고받기 > 

( 기본적으로 window. 으로 사용하는 함수들은 
다 현재 창에서 실행 한다는 것을 의미 ) 
(그래서, 어짜피 현재창에서만 작업할거면, window 생략하고 바로 함수 사용하는것. ) 

=> 새창(자식창,팝업창) 에서 실행되게 하고싶은거면, 그 창을 명시(변수명) 해서 사용 

 

(1) 부모창 => 자식창 ( 변수명 ) 
( 현재 HTML 위치 = 부모창 ) 

window.onload = function(){

    let childWindow;
    document.getElementById("openWindow").onclick =
    function(){
    childWindow = window.open("newPage.html", "new page", "width=400, height=500, left=50, top=50, resizable=yes, location=yes");

childWindow.onload = function(){
    childWindow.document.getElementById("newpage").innerHTML = "부모에서 데이터 전송받음";
    childWindow.document.getElementById("newpage").style = "color:green";
    }
}

 

- (window.)document.get => childWindow.get
=> 자식창에서 id 로 찾아서, 거기 innerHTML 등에 값을 넣겠다. 
=> window 속성을 이용해서 부모창 => 자식창에 데이터 전송 

 

- 전체를 onload 로 감싸주면 기본적으로 로드되고 나서 실행하게 해주는 것 

- 자식창에도 onload 를 다시 걸어줘야함! 

안그러면 load 되기전에 실행되서 id 못찾음 
( 전체 onload 속, 안에서도 onload 필요- 속도,순서맞추기 ) 



(2) 자식창 => 부모창 ( opener ) 
- 자식창 HTML 에서 window 는 자식창을 의미. 

 

=> window.opener : 현재창(자식창)의 opener = 부모창 
 
document.getElementById("toparent").onclick = function(){
  window.opener.document.getElementById("fromchild").innerHTML ="자식창으로 부터 전송된 데이터";
  window.opener.document.getElementById("fromchild").style ="color:yellow";

=> opener 부모창에서 id 로 찾아서, 거기 innerHTML 등에 값을 넣겠다. 
=>  window 속성을 이용해서 자식창 => 부모창 데이터 전송 
}

이제 여기서 주고 받는 로직에, 주소 인증 로직, 핸드폰 본인인증로직 등이 들어가면 

우리가 사용하는 팝업인증창을 만들 수 있겠다. 

 

그 외에도 여러 기본 팝업창들을 만드는게 이 window 객체.

중요하고 아주 많이 쓰일 기술로 보인다!