[Javascript] 자바스크립트, window 객체로 새창 띄우기(자식창 띄우기)
- 웹 개발/Javascript
- 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 |
'웹 개발 > Javascript' 카테고리의 다른 글
| [Javascript] 자바스크립트, DOM 태그 검색 방식( id, class, name, 태그명) (0) | 2019.04.18 |
|---|---|
| [Javascript] 자바스크립트, location, history 객체 (1) | 2019.04.15 |
| [Javascript] 자바스크립트 HTML 태그 속성 제어, window onload 함수(BOM) (1) | 2019.04.07 |
| [Javascript] 자바스크립트 키보드 관련 이벤트(onkeydown, onkeyup, onkeypress) (0) | 2019.04.07 |
| [Javascript] 자바스크립트 마우스 이벤트(mouse event) (0) | 2019.04.06 |