예제 10-1. window.open()으로 윈도우 열기. 예제 10-2. 윈도우 닫기 // 수정해야딤
WEB/JAVASCRIPT-CONCEPT 2017. 11. 2. 18:46 |윈도우 열기, window.open()
window.open(sURL, sWindowName, SFeature)
- sURL : 윈도우에 출력할 웹 페이지 주소 문자열
- sWindowName : 새로 여는 윈도우의 이름 문자열로서 생략 가능
- sFeature : 윈도우의 모양, 크기 등의 속성들을 표현하는 문자열. 속성들은 빈칸 없이 콤마(',')로 분리하여 작성하여 생략 가능
* sURL, 웹 페이지 주소
* sWindowName, 윈도우 이름
* sFeature, 윈도우 속성
- 이 매개 변수에는 윈도우의 모양이나 크기 등의 속성들을 전달하는데, yes/no(디폴트) 값으로 설정되는 속성의 경우 yes는속성을 반영하도록 하는 지시이다.
window.open("sample.html","myWin","resizable=yes")
window.open("sample.html","myWin","resizable=1")
window.open("sample.html","myWin","resizable")
속성 값으로 no나 0은 같은 값이다.
window.open()의 3번째 매개 변수 sFeature의 값(윈도우 속성)
width // 윈도우의 폭. 픽셀 값
height // 윈도우의 높이. 픽셀 값
left // 스크린 상의 윈도우 x 좌표. 픽셀 값
top // 스크린 상의 윈도우 y 좌표. 픽셀 값
resizable // 마우스로 윈도우 크기 조절 가능 여부 ( yes | no | 1 | 0 )
location // URL 입력 창을 출력하도록 지정 ( yes | no | 1 | 0 )
menubar // 메뉴바를 출력하도록 지정 ( yes | no | 1 | 0 )
scrollbars // 수직/수평 스크롤바를 출력하도록 지정 ( yes | no | 1 | 0 )
status // 윈도우 하단에 상태바를 출력하도록 지정 ( yes | no | 1 | 0 )
toolbar // 툴바를 출력하도록 지정 ( yes | no | 1 | 0 )
* 윈도우 열기 사례
window.open()로 윈도우를 여는 사례
- myWin 이름에 툴바만 가지는 새 윈도우를 열고 sample.html 출력
window.open("sample.html","myWin","toolbar=yes");
- 현재 윈도우에 sample.html 출력
window.open("sample.html","_self");
- 이름 없는 새 윈도우를 열고 sample.html 출ㄺ
window.open("sample.html","_blank");
- (10,10) 위치에 300 X 400 크기의 myWin 이름의 윈도우 열고 네이버 페이지 출력
window.open("http://www.naver.com","myWin","left=10,top=10,width=300,height=400")
- 이름과 속성이 없는 새 윈도우 열기
window.open("http://www.naver.com");
window.open("http://www.naver.com",null,""); // null 대신 ""가능
- 새로운 빈 윈도우 열기. 아래 4 경우는 모두 동일
window.open();
window.open("");
window.open("","","");
window.open("",null,null)
* 이름 있는 윈도우와 이름 없는 윈도우의 차이점>
1 2 3 | <button onclick="window.open('http://www.naver.com','myWin(윈도우이름)','width=600,height=600')"> 새 윈도우 열기 </button> | cs |
윈도우 이름 있음 = 새 윈도우를 한번만 열고 이후부터는 열린 myWin윈도우를 공유한다
* 윈도우 닫기
윈도우를 닫고자 하면 다음 코드를 사용하면 된다. 윈도우가 닫히면 윈도우는 웹 페이지와 함께 사라진다.
window.close(); 혹은 self.close();
다음은 자신이 연 윈도우를 닫는 코드이다.
1 2 3 | var win = window.open(); // 현재 윈도우에서 새 윈도우 열기 ... win close(); // 자신이 연 윈도우를 닫음 | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>윈도우 열기</title> <script> function load(URL) { window.open(URL, "myWin", "left=300,top=300,width=400,height=300"); } </script> </head> <body> <h3>window.open()으로 윈도우 열기</h3> <hr> <a href="javascript:load('http://www.graceland.com')"> 엘비스 프레슬리 홈 페이지</a><br> <a href="javascript:load('http://www.universalorlando.com')"> 유니버설 올랜드 홈 페이지</a><br> <a href="javascript:load('http://www.disneyworld.com')"> 디즈니월드 홈 페이지</a><br> </body> </html> | cs |
예제 10-2. 윈도우 닫기
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>윈도우 닫기</title> <script> var newWin=null; // 새로 연 윈도우 기억 function load(URL) { newWin = window.open(URL, "myWin", "left=300,top=300,width=400,height=300"); } function closeNewWindow() { if(newWin==null || newWin.closed) // 윈도우가 열리지 않았거나 닫힌 경우 return; // 윈도우가 없는 경우 그냥 리턴 else newWin.close(); // 열어 놓은 윈도우 닫기 } </script> </head> <body> <h3>window의 close()로 윈도우 닫기</h3> <hr> <a href="javascript:load('http://www.disneyworld.com')"> 새 윈도우 열기(디즈니월드)</a><br> <a href="javascript:window.close()"> 현재 윈도우 닫기</a><br> <a href="javascript:closeNewWindow()"> 새 윈도우 닫기</a> </body> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 10-5. 윈도우의 위치와 크기 조절 (0) | 2017.11.02 |
|---|---|
| 예제 10-3. setTimeout()으로 웹 페이지 자동 연결. 예제 10-4. setInterval()로 텍스트 회전 (0) | 2017.11.02 |
| window 객체, window 객체의 프로퍼티와 메소드 // 수정해야됨 p 438 (0) | 2017.11.02 |
| 예제 9-20. 키 이벤트 리스너 (0) | 2017.11.02 |
| 예제 9-19. select 객체에서 선택한 과일 출력 (0) | 2017.11.02 |