1. Window Object
Window 는 브라우저 “창” 을 의미 한다.
window 객체를 이용해 새로운 “window” 를 “open” 할 수도 “close” 할 수도 있다.
open()
open 함수는 새로운 윈도우 창을 생성 해 준다. 총 3개의 인자값을 갖는다.
window.open(보여줄 페이지 주소,"창 이름","옵션");
close()
열었던 새 창을 닫는 역할을 수행하는 함수
<html>
<head>
<meta charset="UTF-8">
<title>DOM SCRIPT</title>
<link rel="icon" href="../img/img01.jpg">
<style>
</style>
</head>
<body>
<button onclick="myWindow()">basic</button>
<button onclick="closeWin()">창닫기</button>
</body>
<script>
var h = window.innerHeight;
var w = window.innerWidth;
console.log('창 크기 : ' + w + ' / ' + h);
var win; // 자식창을 받아줄 변수
function myWindow(){
console.log('window popup');
// window.open(url, 창제목, 옵션)
// 옵션이 없으면 전체 창으로 띄워진다.
/*
width, height = 창의 크기
top, left = 창의 위치 (듀얼모니터의 경우 1번창 기준)
resizeable = 창 크기 허용 여부 (IE 에서만 가능)
scrollbar = 컨텐츠가 새 창보다 큰 경우 스크롤 생성 여부 (IE, FIREFOX, OPERA)
*/
win = open('https://www.w3schools.com/js/default.asp','',
'width = 400, height = 400, top = 500, left = 500, resizeable = no, scrollbar = no');
}
function closeWin(){
console.log('window close');
// 자식 창을 닫기 위한 필수 조건 : 자식 창을 담은 변수가 있어야 한다.
win.close();
}
</script>
</html>
2. location 객체
location 객체는 창을 이동시키거나 이동 주소에 대한 정보를 제공해 준다.
window.location 이 정식 명칭이지만, window 는 생략할 수 있다.
| attribute | Description |
| window.location.href | 현재 페이지가 존재하는 전체 경로 |
| window.location.protocol | 프로토콜(웹 상에서 http 나 https) |
| window.location.hostname | 도메인을 의미 |
| window.location.pathname | 도메인을 제외한 나머지 주소 |
| window.location.port | 포트번호(웹 기본 포트 80,433 은 표시하지 않는다.) |
<html>
<head>
<meta charset="UTF-8">
<title>DOM SCRIPT</title>
<link rel="icon" href="../img/img01.jpg">
<style>
</style>
</head>
<body>
<ol>
<li>location 은 위치 정보를 얻을 때 사용한다.</li>
<li>window.location.href</li>
<li>window.location.protocol</li>
<li>window.location.hostname</li>
<li>window.location.pathname</li>
<li>window.location.port</li>
<li>window 는 생략 가능</li>
</ol>
<button onclick="move()">페이지 이동</button>
</body>
<script>
// 서버 환경에서만 확인 할 수 있다.
console.log(location.href); // 전체 경로
console.log(location.protocol); // 통신 프로토콜 http, https, file
console.log(location.hostname); // 도메인 주소
console.log(location.pathname); // 도메인을 제외한 나버지 주소
console.log(location.port); // 포트번호
function move(){
location.href = 'https://www.naver.com';
}
</script>
</html>'JS-DOM' 카테고리의 다른 글
| 04. 부모-자식 창, alert, timing, JSON (0) | 2024.03.08 |
|---|---|
| 02. Event (0) | 2024.03.08 |
| 01. JS-DOM의 기초 (0) | 2024.03.08 |