웹 개발/Javascript

[Javascript] 자바스크립트, window 객체로 새창 띄우기(자식창 띄우기)

코딩하는흑구 2019. 4. 15. 21:46

window 객체

 - 브라우저(창)을 참조하는 객체

 - BOM의 최상위 객체

 - 예약어 제공 객체

 - 창을 조작


HTML 태그가 다음과 같이 있을 때


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
    <!-- ex15_window.htm -->
    
    <form name="form1">
        <!-- <input type="button" name ="btn1" value="" /> -->
        <input type="button" name ="btn1" value="자식창 띄우기" />
        <input type="button" name ="btn2" value="자식창 닫기" />
        <hr />
        <input type="text" name="txt1"  />
        <input type="button" name="btn3" value="자식창 접근하기" />
    
        <hr />
        <input type="button" name="btn4" value="자식창 제어하기" />
    
    </form>
</body>
cs



클릭시 새창을 여는 버튼 클릭 이벤트


1
2
3
4
5
6
7
8
9
10
btn1.onclick=function(){
    //window.close(); // 현재 window 닫기.
    // 창을 새로 띄우기(자식창)
    //window.open(URL,이름,옵션);
    //window.open("ex14_collection.htm","child","width=200,height=200,top=550,left=220"); 
    //이것만 기억해두자
            
    //이름은 중복창 제어용
    child = window.open("ex15_child.htm","child","width=400,height=300");
};//click
cs



팝업창이란?

- 자바스크립트가 시작할 때! onload 이벤트 혹은 제이쿼리의 $(document).ready(function()) 을 실행할 때 뜨는 창을 의미한다. 이것은 사용자의 의지(클릭)와는  상관이 없으므로 브라우저에 의해 팝업 차단이 되어있다.


자식창을 닫는 버튼 클릭 이벤트


1
2
3
4
5
6
7
btn2.onclick=function(){
    //자식(창) 닫기
    //자식창을 제어하려면 자식창의 window 객체를 얻어온다..
    
    child.close();
    //child.document.form1.btn1.value="자식창버튼"; child의 윈도우로 내 window 조종하듯이 할 수 있다.            
};
cs


자식창을 제어하는 코드(창 제어)


- moveTo : screen의 픽셀 값으로 창이 이동(왼쪽 꼭지점 기준) 

- moveBy : 현재 위치에서 ? 픽셀 좌우로, ? 픽셀 위아래로 이동

- resizeTo : 해당 픽셀 값만큼 창의 크기 변경

- resizeBy : 현재 크기에서 상대적인 값으로 크기 변경


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
btn4.onclick = function(){
    //window 메소드
            
    //창 이동하기(절대값)
    child.moveTo(1000,500);
            
    //창 이동하기(상대이동) - 현재 위치를 기준으로 이동함.
    child.moveBy(30,30);
            
    //창 크기 변경(절대값)
    child.resizeTo(500,500);
            
    //창 크기 변경(상대값)
    child.resizeBy(-10,-10);
};
cs



자식창 파일 예제


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
    var btn1,btn2, txt1;
    window.onload = function(){
        btn1 = window.document.form1.btn1;
        btn2 = window.document.form1.btn2;
        txt1 = window.document.form1.txt1;
        
        btn1.onclick = function(){
            window.close();
        };
        
        btn2.onclick = function(){
            //부모창이 가지고 있는 텍스트 박스에 데이터를 복사 > 부모창의 window 객체 얻어와야함.
            //부모창의 window 객체를 참조할수 있는 예약어 제공. > opener
            opener.document.forms["form1"].txt1.value=window.document.forms["form1"].txt1.value;    
        };
    };
</script>
<title></title>
<link rel="stylesheet" href="/WebClientTest/css/css/basic.css">
</head>
<body>
 
<!-- ex15_child.htm -->
    <form name="form1">
        <input type="button" name="btn1" value="창닫기" />
        <hr />
        <input type="text" name="txt1"  />
        <input type="button" name="btn2" value="부모창 접근하기" />    
    </form>
</body>
</html>
cs



저작자표시