티스토리 뷰

Web/JS

[Web/JS] 자바스크립트 - 브라우저 객체

poopooreum 2024. 5. 14. 21:46
반응형

✏️ 브라우저 관련 객체

종류 설명
window 브라우저 창이 열릴 때마다 하나씩 만들어지고 브라우저 창 안의 요소 중에서 최상위
document 웹 문서마다 하나씩 있으며 <body> 태그를 만나면 만들어짐, HTML 문서의 정보가 담겨 있음
navigator 현재 사용하는 브라우저의 정보가 들어 있음
history 현재 창에서 사용자의 방문 기록을 저장
location 현재 페이지의 URL 정보가 담겨 있음
screen 현재 사용하는 화면 정보를 다룸

✏️ window 객체의 프로퍼티

종류 설명
document 브라우저 창에 표시된 웹 문서에 접근 가능
frameElement 현재 창이 다른 요소 안에 포함되어 있을 경우 그 요소를 반환하고, 반대로 포함되어 있지 않으면 null을
반환
innerHeight 내용 영역의 높이를 나타냄
innerWidth 내용 영역의 너비를 나타냄
localStorage 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환
location window 객체의 위치 또는 현재 URL을 나타냄
name 브라우저 창의 이름을 가져오가너 수정
outerHeight 브라우저 창의 높이를 나타냄
outerWidth 브라우저 창의 너비를 나타냄
pageXOffset 스크롤했을 때 수평으로 이동하는 픽셀 수로 scrollX와 같음
pageYOffset 스크롤했을 때 수직으로 이동하는 픽셀 수로 scrollY와 같음
parent 현재 창이나 서브 프레임의 부모
screenX 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리를 나타냄
screenY 브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서 떨어져 있는 거리를 나타냄
scrollX 스크롤했을 때 수평으로 이동하는 픽셀 수를 나타냄
scrollY 스크롤했을 때 수직으로 이동하는 픽셀 수를 나타냄
sessionStorage 웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환

✏️ window 객체의 메서드

종류 설명
alert() 알림 창을 표시
blur() 현재 창에서 포커스를 제거
close() 현재 창을 닫음
confirm() [확인], [취소] 버튼이 있는 확인 창 표시
focus() 현재 창에 포커스 부여
moveBy() 현재 창을 지정한 크기만큼 이동
moveTo() 현재 창을 지정한 좌표로 이동
open() 새로운 창을 열어줌
postMessage() 메시지를 다른 창으로 전달
print() 현재 문서를 인쇄
prompt() 프롬프트 창에 입력한 텍스트를 반환
resizeBy() 지정한 크기만큼 현재 창의 크기를 조절
resizeTo() 동적으로 브라우저 창의 크기를 조절
scroll() 문서에서 특정 위치로 스크롤
scrollBy() 지정한 크기만큼 스크롤
scrollTo() 지정한 위치까지 스크롤
sizeToContent() 내용에 맞게 창의 크기를 조절
stop() 로딩 중지

`

✏️ open() 메서드

링크를 클릭하거나 웹 문서를 열 때 새 창이 자동으로 뜨게 하기 위해서는 window.open() 메서드를 사용하고, 주로 홈페이지의 팝업 창을 띄울 때 사용합니다. 기본형=> window.open(경로, 창 이름, 창 옵션)

  1. 경로 : 팝업 창에 표시할 문서나 사이트의 경로(주소)를 나타냅니다.
  2. 창 이름 : 팝업 창의 이름을 지정하면 항상 이 창에 팝업 내용이 나타나도록 할 수 있습니다. 이름을 지정하지 않으면 팝업 창이 계속 새로 나타납니다.
  3. 창 옵션 : left, top 속성을 사용해 위치를 정하거나 width, height 속성을 사용해 크기를 지정할 수 있습니다. 위치를 지정하지 않으면 팝업 창은 화면의 맨 왼쪽 위에 나타납니다.
<script>
  window.open("notice.html","", "width=500, height=400");
</script>

 

#1 open() 메서드 - 창 이름 지정하기

창 이름을 지정하면 똑같은 팝업 창이 여러 번 나오는 것을 방지할 수 있습니다.

<script>
  window.open("notice.html","pop", "width=500, height=400");
</script>

 

#2 open() 메서드 - 창 위치 지정하기

//왼쪽에서 100픽셀, 위에서 200픽셀 떨어진 위치에 <br> 팝업 창이 표시됩니다
<script>
  window.open("notice.html","pop", "width=500, height=400, left=100, top=200");
</script>

 

 

#3 open() 메서드 - 팝업 차단 고려하기

웹 브라우저에서 팝업을 차단하면 window.open()은 null을 반환합니다. 따라서 window.open() 메서드를 실행한 후 반환값을 체크하면 팝업이 차단되었는지 알아낼 수 있습니다.

<script>
  var blocked = false;
  function openPopup() {			
	var newWin = window.open("notice.html", "pop", "width=500, height=400");
	if (newWin == null) {
	   alert("팝업이 차단되어 있습니다. 팝업 차단을 해제해 주세요.")
	}
	newWin.moveBy(100,100);			
  }
</script>

 

✏️ close() 메서드

일반적으로 팝업 창 내용을 본 후에 화면 아래쪽에 닫기 버튼이나 링크를 포함하는 경우가 많은데 이때 close() 메서드를 사용할 수 있습니다.

 <button onclick="javascript:window.close();">닫기</button>

 

✏️ navigator 객체

navigator 객체에는 웹 브라우저의 버전을 비롯해 플러그인 설치 정보나 온.오프라인 등의 여러 정보가 있습니다. 이 정보들은 사용자가 수정할 수 없고 가져와서 보여줄 수만 있습니다.

 

#1 navigator 객체 - 렌더링 엔진

웹 브라우저를 고려할 때 가장 먼저 생각하는 분야입니다. 아직 표준화가 되지 않은 CSS 속성 앞에는 브라우저 벤더를 의미하는 프리픽스(prefix)를 지정합니다. 웹 브라우저마다 HTML이나 CSS를 해석하는 렌더링 엔진(rendering engine)이 다르기 때문입니다. 웹 브라우저는 웹 문서를 불러오면 내장된 렌더링 엔진에서 소스를 해석합니다. 그리고 웹 브라우저마다 사용하는 렌더링 엔진이 다르므로 프리픽스를 붙여 브라우저를 구별합니다. 마찬가지로 웹 브라우저마다 내장된 자바스크립트 엔진도 서로 다릅니다. 그래서 사이트마다 보여 주는 효과와 성능은 달라질 수 있습니다.

브라우저 레더링 엔진 자바스크립트 엔진
크롬(Chrome) 블링크(Blink) V8
파이어폭스(Firefox) 게코(Gecko) 스파이더몽키(SpiderMonkey)
인터넷 익스플로러(Internet Explorer) 트라이덴트(Trident) 차크라(Chakra)
사파리(Safari) 웹킷(Webkit) 자바스크립트코어(JavascriptCore)
오페라(Opera) 블링크(Blink) V8

 

#2 navigator 객체 - useAgent 프로퍼티

navigator 객체에서 가장 먼저 알아야 할 프로퍼티이며 사용자 에이전트 문자열을 의미합니다. userAgent는 사용자의 웹 브라우저 정보를 서버에 보낼 때 사용합니다. 사용자의 웹 브라우저 버전, 자바스크립트의 엔진 종류 등 여러 정보가 들어 있어 서버에서 사용자에게 맞는 웹 페이지를 보여 줄 수 있습니다.

// 크롬 userAgent
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36

// 엣지 userAgent
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36 Edg/81.0.146.72

// 파이어폭스 userAgent
Mozilla/5.0 (Windows NT 10.0; WOW64; x64; rv:76.0) Gecko/201000101 Firefox/76.0

여기서 특이한 점은 앞이 모두 Mozilla라는 예약어로 시작한다는 점입니다. 인터넷 초창기에 넷스케이프 내비게이터 웹 브라우저를 많이 사용하여서 넷스케이프 사용자 에이전트 문자열과 호환하기 위해 넷스케이프 네비게이터에서 사용하는Mozilla라는 키워드를 사용하기 시작하였습니다. 일부 브라우저는 트라이덴트라는 엔진을 사용하기도 합니다.

 

크롬, 마이크로소프트 엣지, 사파리 브라우저는 모두 웹킷(Webkit) 엔진을 기반으로 합니다. 웹킷 엔진은 다시 KHTML이라는 오픈소스 렌더링 엔진을 기반으로 합니다. 그래서 사용자 에이전트 문자열에 KHTML이라는 내용이 포함되어 있습니다.

// 윈도우용 크롬 브라우저 81.0 버전
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36

// 윈도우용 마이크로소프트 엣지 81.0 버전 
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36 Edg/81.0.146.72

// 맥용 사파리 브라우저 9.1버전
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/601.7.7 (KHTML, like Gecko) Version/9.1.2 Safari/601.7.7

 

#3 navigator 객체 - 사용자 에이전트 문자열 표

종류 설명
Mozilla/x.x 모질라 버전을 나타냄
Windows NT x.x 브라우저를 실행하는 컴퓨터 운영체제를 나타냄
Win64; x64 윈도우 64비트 기반을 나타냄
WOW64 윈도우 64비트 기반을 나타냄
Trident/x.x 트라디엔트 엔진 기반을 나타냄
rv: x.x 브라우저 버전을 나타냄
AppleWebKit/x.x 웹킷 엔진의 빌드 번호를 나타냄
KHTML 오픈소스 렌더링 엔진인 KHTML을 의미
like Gecko 게코 기반의 다른 브라우저와 호환을 의미
Firefox/x.x 파이어폭스 브라우저의 버전을 나타냄
Chrome/x.x 크롬 버전을 나타냄
Safari/x.x 사파리 브라우저의 빌드 번호를 나타냄

 

#4 navigator 객체 - 주요 프로퍼티

종류 설명
battery 베터리 충전 상태를 알려줌
cookieEnabled 쿠키 정보를 무시하면 false, 허용하면 true를 반환
geolocation 모바일 기기를 이용한 위치 정보를 나타냄
language 브라우저 UI의 언어 정보를 나타냄
oscpu 현재 운영체제 정보를 나타냄
userAgent 현재 브라우저 정보를 담고 있는 사용자 에이전트 문자열

✏️ history 객체

구분 설명
프로퍼티 length 현재 브라우저 창의 history 목록에 있는 항목의 개수, 즉 방문한 사이트 개수가 저장
메서드 back() history 목록에서 이전 페이지를 현재 화면으로 불러옴
forward() history 목록에서 다음 페이지를 현재 화면으로 불러옴
go() history 목록에서 현재 페이지를 기준으로 상대적인 위치에 있는 페이지를 현재 화면으로 불러옴.
예를 들어 history.go(1)은 다음 페이지를 가져오고 history.go(-1)은 이전 페이지를 불러옴

✏️ location 객체

구분 설명
프로퍼티 hash URL 중에서 #로 시작하는 해시 부분의 정보를 담고 있음
host URL의 호스트 이름과 포트 번호를 담고 있음
hostname URL의 호스트 이름이 저장
href 전체 URL, 이 값을 변경하면 해당 주소로 이동 가능
pathname URL 경로가 저장
port URL의 포트 번호를 저장
porotocol URL의 프로토콜을 저장
password 도메인 이름 앞에 username과 password를 함께 입력해서 접속하는 사이트의 URL일 경우에
password 정보를 저장
search URL 중에서 ?로 시작하는 검색 내용을 저장
username 도메인 이름 앞에 username을 함께 입력해서 접속하는 사이트의 URL일 경우에 username 정보 저장
메서드 assign() 현재 문서에 새 문서 주소를 할당해서 새 문서를 가져옴
reload() 현재 문서를 다시 불러옴
replace() 현재 문서의 URL을 지우고 다른 URL의 문서로 교체
toString() 현재 문서의 URL을 문자열로 반환

✏️ screen 객체

구분 설명
프로퍼티 availHeight UI 영역(윈도우의 작업 표시줄이나 Mac의 독 등)을 제외한 영역의 높이를 나타냄
availWidth UI 영역을 제외한 영역의 너비를 나타냄
colorDepth 화면에서 픽셀을 렌더링할 때 사용하는 색상 수를 나타냄
height UI 영역을 포함한 화면의 높이를 나타냄
orientation 화면의 현재 방향을 나타냄
pixelDepth 화면에서 픽셀을 렌더링할 때 사용하는 비트 수를 나타냄
width UI 영역을 포함한 화면의 너비를 나타냄
메서드 lockOrientation() 화면 방향을 잠굼
unlockOrientation() 화면 방향 잠금을 해제
반응형
저작자표시 비영리 변경금지

'Web > JS' 카테고리의 다른 글

[Web/JS] 자바스크립트 - DOM 요소 접근 및 속성  (0) 2024.05.16
[Web/JS] 자바스크립트 - DOM(문서 객체 모델)  (0) 2024.05.15
[Web/JS] 자바스크립트 - 내장 객체  (0) 2024.05.13
[Web/JS] 자바스크립트 - 객체  (0) 2024.05.13
[Web/JS] 자바스크립트 - DOM을 이용한 이벤트 처리기  (0) 2024.05.11
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
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
글 보관함