box/javascript+

Javascript 내장 객체 - window

window 객체

  • 브라우저 창에 대한 모든 상항을 제어하는 최상위 객체이다.
  • 브라우저 제어 관련 내장 객체는 window의 하위 객체들이다.

 

 

window 객체는 javascript에서 사용되는 모든 객체의 최상위 객체로서 존재한다.

그러므로 내장 객체에 대한 접근은 다음과 같이 이루어져야 한다.

window.내장객체명.함수명([파라미터]);

 

 

 

⭐ 브라우저의 창 제어 기능 (브라우저의 종류에 영향을 받음)

- 새로운 브라우저 창을 열 경우 다음과 같은 구문을 사용한다.

이 기능은 탭 브라우징을 지원하는 웹 브라우저에서는 새로운 탭을 여는 기능으로 동작한다.

window.open("페이지 URL");

- 팝업창으로 여는 기능도 지원하는데 그때는 파라미터 값을 설정해 주면 된다.

window.open("페이지 URL","창이름","옵션명")

 

 

 

⭐ window 객체 속성

옵션명 값 설명
toolbar yes/no 툴바 아이콘의 표시 여부를 결정
location 주소창(url) 표시 여부를 결정
status 상태바 표시 여부를 결정한다
menubar 메뉴 표시 여부를 결정한다
scrollbars 스크롤바 표시 여부를 결정한다
resizable 창의 크기를 조절 가능하게 할지 여부를 결정
width 픽셀값 창의 폭을 지정
height 창의 높이를 지정

 

⭐ window 객체의 메소드

메소드 설 명
alert() 확인 버튼을 누를 수 있는 경고 대화 상자를 표시
confirm() 어떤 이벤트를 처리하기 전에 사용자로부터 확인을 요청받는 대화 상자
확인과 취소 버튼을 누를 수 있는 대화 상자를 표시
prompt() 사용자로부터 텍스트를 입력받을 수 있는 대화 상자
createPopup() 팝업 창을 만든다
open() 새창을 열어준다
close() 현재 윈도우를 닫는다
stop() 원도우 창이 로드되는 것을 멈춤
 
scrollTo() 윈도우 스크롤의 위치를 특정 위치로 이동
scrollBy() 윈도우 스크롤 위치를 기준으로 이동
moveBy() 윈도우 창의 위치를 현재 위치를 기준으로 이동
moveTo() 윈도우 창의 위치를 특정 위치로 이동시킬 때 사용
focus() 현재 윈도우로 포커스를 설정
 
setTimeout() 타이머를 설정하고 지정해 준 시간이 경과한 후에 특정 연산을 수행
clearTimeout() setTimeout() 설정을 취소
setInterval() 지정된 시간이 경과할 때마다 함수를 반복해서 실행
setTimeout() 일정 시간 후 함수를 한 번만 실행
clearInterval() setInterval()을 설정을 취소

 

 

⭐ window 객체 예시

// 새창 띄우기
function open1() {
	window.open('01-open.html');
}

// <body>
<a href="#" onclick="open1()">새 창 열기(1)</a>
// 클릭할 때 마다 창이 새로 열리는 팝업창
function open2() {
	window.open('01-open.html', '', 'width=480, height=430, scrollbars=no, toolbar=no, menubar=no, status=no, location=no');
}

// <body>
<a href="#" onclick="open2()">새 창 열기(2)</a>
// 팝업의 주소를 파라미터로 전달받는다
function open3(url) {
	window.open(url, 'mywin', 'width=800, height=500, scrollbars=no, toolbar=no, menubar=no, status=no, location=no');
}

// <body>
<a href="#" onclick="open3('https://www.naver.com/')">새 창 열기(3-1)</a>
<br />
<a href="#" onclick="open3('https://www.daum.net/')">새 창 열기(3-2)</a>
let win;
function open_window(url) {
	url = prompt ("원하는 URL 주소를 입력하시오");
	if (url != "") {
		win = window.open(url, "", 'width=800, height=500, scrollbars=no, toolbar=no, menubar=no, status=no, location=no');
	}
}

// <body>
<!--  사용자로 하여큼 이동 url을 직접 입력 -->
<button type="button" onclick="open_window()">Open a page new window</button>
<button type="button" onclick="win.close()">Close the window</button>

'box > javascript+' 카테고리의 다른 글

Javascript 내장 객체 - navigator  (0) 2022.06.30
Javascript 내장 객체 - location  (0) 2022.06.30
Javascript 내장 객체 - Math  (0) 2022.06.30
Javascript 내장 객체 - Date  (0) 2022.06.30
Javascript 내장 객체 - Array  (0) 2022.06.30

티스토리툴바