[JS BOM] 자바스크립트 Browser 정보 활용

Navigator 객체를 사용하여 브라우저 정보 가져오기

window 객체에는 Navigator 객체에 대한 참조를 반환하는 Navigator 속성이 있습니다. Navigator 객체는 사용 중인 브라우저에 대한 정보를 포함하고 있습니다. userAgent 속성을 사용하면 사용 중인 브라우저와 운영 체제에 대한 정보를 반환합니다. 예를 들어, 다음과 같은 코드를 실행하면 Safari 10 버전을 Mac OS에서 사용하고 있다는 정보가 표시됩니다.

window.navigator.userAgent
>>"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/602.4.8 (KHTML, like Gecko) Version/10.0.3 Safari/602.4.8"

주의할 점은 모든 브라우저는 어느 정도 다른 브라우저인 척하기 위해 일부 정보를 조작합니다.

예를 들어, 모든 브라우저는 유산으로 남은 넷스케이프와의 호환성을 위해 userAgent 속성에 "Mozilla" 문자열을 포함합니다. userAgent 속성은 공식 명세에서 폐기되었지만, 주요 브라우저에서 여전히 잘 지원됩니다.

// 브라우저의 언어 설정 확인하기:
const language = window.navigator.language;
console.log(`현재 언어: ${language}`);

// 플러그인 지원 여부 확인하기:
const plugins = window.navigator.plugins;
console.log(plugins);

// 사용자의 온라인 상태 확인하기:
const isOnline = window.navigator.onLine;
console.log(`현재 온라인 상태: ${isOnline}`);

// 사용자 에이전트 정보를 통한 브라우저 식별하기:
const userAgent = window.navigator.userAgent;
if (userAgent.includes("Chrome")) {
  console.log("현재 사용 중인 브라우저는 Chrome입니다.");
} else if (userAgent.includes("Firefox")) {
  console.log("현재 사용 중인 브라우저는 Firefox입니다.");
} else {
  console.log("기타 브라우저입니다.");
}

// 사용자의 현재 위치 정보
window.navigator.geolocation.getCurrentPosition(position => {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;
  console.log(`현재 위치: 위도 ${latitude}, 경도 ${longitude}`);
});

 

window.history 속성

window.history 속성을 사용하면 현재 브라우저 세션에서 이전에 방문한 페이지에 대한 정보에 접근할 수 있습니다.

window.history.length 속성은 현재 페이지에 도달하기 전에 방문한 페이지의 수를 보여줍니다.

window.history.go() 메서드는 특정 페이지로 이동하는 데 사용될 수 있으며, 여기서 0은 현재 페이지를 나타냅니다.

 

window.history.go(1); // goes forward 1 page
window.history.go(0); // reloads the current page
window.history.go(-1); // goes back 1 page

 

window.history.forward()와 window.history.back() 메서드도 있습니다.

각각 하나의 페이지씩 앞으로 또는 뒤로 이동하는 데 사용할 수 있으며, 브라우저의 앞으로 및 뒤로 버튼을 사용하는 것과 같은 역할을 합니다.

 

 HTML5 History API 방식으로 사용하는 것과 비교해서 보세요.

function navigateTo(url) {
  history.pushState(null, null, url);
  loadPage(url);
}

function loadPage(url) {
  // 페이지 로드 로직 구현
  console.log("Loading page: " + url);
  // 여기서는 페이지를 실제로 로드하지 않고 콘솔에 로그를 출력하는 예시입니다.
}

window.onpopstate = function(event) {
  // 브라우저의 뒤로/앞으로 버튼을 클릭했을 때 처리할 로직 구현
  if (event.state) {
    loadPage(event.state.url);
  }
}

 

<a href="#" onclick="navigateTo('/page1')">Page 1</a>
<a href="#" onclick="navigateTo('/page2')">Page 2</a>
<a href="#" onclick="navigateTo('/page3')">Page 3</a>

 

Screen Information

 

window.screen 객체는 브라우저가 표시되는 화면에 관한 정보를 포함하고 있습니다. height와 width 속성을 사용하여 화면의 높이와 너비를 각각 픽셀로 알아낼 수 있습니다.

window.screen.height
>> 1024
window.screen.width
>> 1280

 

availHeight와 availWidth 속성은 운영 체제 메뉴를 제외한 화면의 높이와 너비를 찾는 데 사용할 수 있습니다.

window.screen.availWidth
>> 1280
window.screen.availHeight
>> 995

 

colorDepth 속성은 사용자의 모니터의 색 비트 깊이를 찾는 데 사용될 수 있습니다. 그러나 이를 수행하는 데 있어 사용 사례가 사용자 통계 수집을 제외하면 거의 없습니다.

window.screen.colorDepth;
>> 24

 

모바일에서의 유용성 Screen 객체는 모바일 기기에서 더 많은 용도로 사용될 수 있습니다. 또한 기기의 화면을 끄거나, 방향 변경을 감지하거나, 특정 방향으로 잠금 등의 작업을 수행할 수 있습니다.

 

그 외

window.open() 메서드를 사용하여 새 창을 열 수 있습니다. 이 메서드는 첫 번째 매개변수로 열릴 페이지의 URL, 두 번째 매개변수로 창 제목, 세 번째 매개변수로 속성 목록을 받습니다. 이 메서드는 변수에 할당하여 나중에 코드에서 창을 참조할 수도 있습니다.

const popup = window.open('https://sitepoint.com','SitePoint','width=700,height=700,resizable=yes');

 

close() 메서드는 창을 닫을 수 있습니다. 단, 해당 창에 대한 참조가 있는 경우에만 가능합니다.

popup.close();

 

window.moveTo() 메서드를 사용하여 창을 이동시킬 수도 있습니다. 이 메서드는 창을 이동할 화면의 X 및 Y 좌표를 매개변수로 받습니다.

window.moveTo(0,0); 
// will move the window to the top-left corner of the screen

 

window.resizeTo() 메서드를 사용하여 창의 크기를 조정할 수 있습니다. 이 메서드는 조정된 창의 너비와 높이를 지정하는 두 개의 매개변수를 사용합니다.

window.resizeTo(600,400);