1. window 객체의 생성
: 열려 있는 브라우저 윈도우나 탭 윈도우를 나타내는 객체
: 윈도우마다 하나의 window 객체 생성
- 브라우저가 새로운 웹 페이지를 로드할 때 window 객체 자동 생성
- <iframe> 태그 당 하나의 window 객체 자동 생성
- 개발자가 다음 자바스크립트 코드로 임의의 window 객체 생성
2. window의 이벤트 리스너
3. 윈도우 속성과 window 프로퍼티
① 윈도우의 바(bar)와 관련된 프로퍼티
menubar, locationbar, toolbar, personalbar
② 윈도우의 위치 및 크기 관련 프로퍼티
screenX, screenY, innerWidth, innerHeight, outerWidth, outerHeight
4. 윈도우 열기 : window.open()
※ window.open() 시 window를 생략하면 document.open()으로 처리되므로 window 명시 필수
window.open("웹페이지 URL", "윈도우이름", "윈도우속성");
- 윈도우 이름 : _blank, _parent, _self, _top
- 윈도우 속성 : 윈도우의 모양이나 크기 속성 전달window.open("http://www.naver.com", "myWin", "left=10, top=10, width=300, height=400");
<예시>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
</body>
</html>
5. 윈도우 닫기 : window.close(); 혹은 self.close();
var win = window.open(); //현재 윈도우에서 새 윈도우 열기
...
win.close(); //자신이 연 윈도우를 닫음
<예시>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
6. iframe 객체의 window 객체
window.frames[0], window.frames[1], window.frames[window.length-1]'JavaScript > 5. 윈도우와 브라우저 관련 객체' 카테고리의 다른 글
| Day 49 : Exercise (0) | 2021.12.24 |
|---|---|
| Day 48 : location/navigator/screen/history 객체 (0) | 2021.12.23 |
| Day 48 : window 객체 활용 (0) | 2021.12.23 |
| Day 48 : window의 타이머 활용 (0) | 2021.12.23 |
| Day 48 : 브라우저 관련 객체 개요 (0) | 2021.12.23 |