[펌] 웹브라우저 창, 화면에 대한 정보 얻기 정보
HTML [펌] 웹브라우저 창, 화면에 대한 정보 얻기
본문
http://cafe.naver.com/ArticleRead.nhn?clubid=10346911&articleid=125480&menuid=205&boardtype=L&page=1
창 위치와 크기
대부분의 브라우저들은 브라우저 창의 크기와 위치에 관한 정보를 담은 간단한
프로퍼티 집합을 Window 객체를 통해 제공한다.(단, IE는 예외)
// 데스크탑에 띄운 브라우저 창의 전체 크기
var windowWidth = window.outerWidth;
var windowHeight = window.outerHeight;
// 데스크탑에 띄운 브라우저 창의 위치
var window = window.screenX
var window = window.screenY
// HTML 문서가 표시되는 화상 표시 영역인 뷰포트(viewport)의 크기
// 이것은 브라우저 창 크기에서 메뉴바, 툴바, 스크롤바 등의 크기를 뺀 나머지
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;
// 다음의 값들은 수평, 수직 스크롤바의 위치를 나타내며, 문서 좌표와 창
// 좌표를 상호 변환하는데 사용된다. 이 값들은 화면의 좌측 상단
// 모서리에 문서의 어느 부분이 위치하는지 나타낸다.
var horizontalScroll = window.pageXOffset;
var verticalScroll = window.pageYOffset;
위의 프로퍼티들은 모두 읽기 전용이다.
또한 반드시 숙지해 두어야 할 몇가지 좌표계들이 있다. 화면좌표(screen
coordinates)는 데스크탑 상에서 브라우저 창이 떠 있는 곳의 위치를
나타내며 데스크탑의 좌측 상단 모서리에서 상대적으로 계산된다. 창 좌표
(window coordinates)는 웹 브라우저의 뷰포트(viewport, 화상 표시 영역)
안의 위치를 나타내며 뷰포트의 좌측 상단 모서리에서 상대적으로 계산된다.
문서 좌표(document coordinates)는 HTML 문서 안의 위치를 나타내며
문서의 좌측 상단 모서리에서 상대적으로 계산된다. 만약 (웹 페이지들이
종종 그러듯이) 문서가 화면 표시 영역보다 길거나 넓다면 문서 좌표와
창 좌표는 일치하지 않는다 이 경우에 문서 좌표와 창 좌표를 서로 변환하기
위해 스크롤바의 위치를 고여해야 한다.
IE의 Window 객체에는 위의 프로퍼티들이 없다. 몇몇 이유로 IE는 이러한
창 위치와 크기 관련 프로퍼티들을 HTML문서의 <body> 부분에 두었다.
더 혼란스러운 점은, IE 6에서 <!DOCTYPE> 선언부가 있는 문서를 출력
할 때 이 프로퍼티들을 document.body 대신 document.documentElement
엘리먼트에 둔다는 것이다.
브라우저 종류에 관계없이 창 위치와 크기 알아내기 모듈
/**
* Geometry.js : 창, 문서의 위치와 크기를 알기 위한 이식 가능한 함수들
* getWindowX/Y() : 화면 상에서 브라우저 창이 띄워진 위치를 반환.
* getViewportWidth/Height() : 브라우저의 뷰포트 영역의 크기 반환.
* getDocumentWidth/Height() : 문서의 크기를 반환.
* getHorizontalScroll() : 수평 스크롤바의 위치를 반환.
* getVerticalScroll() : 수직 스크롤바의 위치를 반환.
* 브라우저의 종류에 상관없이 브라우저 창의 크기를 반환하기 위한
* 방법은 존재하지 않는다. 따라서 getWindowWidth/Height() 함수가
* 빠져있음을 주의.
* 이 모듈들은 문서의 <head> 부분 대신 <body> 부분에 포함되어야 함.
*/
var Geometry = {};
if (window.screenLeft === undefined) { // IE
Geometry.getWindowX = function() { return window.screenLeft; };
Geometry.getWindowY = function() { return window.screenTop; };
}
else if (window.screenX) { // 파이어폭스
Geometry.getWindowX = function() { return window.screenX; };
Geometry.getWindowY = function() { return window.screenY; };
}
if (window.innterWidth) { // IE를 제외한 모든 브라우저
Geometry.getViewportWidth = function() { return window.innerWidth; };
Geometry.getViewportHeight = function() { return window.innerHeight; };
Geometry.getHorizontalScroll = fucntion() { return window.pageXOffset; };
Geometry.getVerticalScroll = function() { return window.pageYOffset; };
}
else if (document.documentElement && document.documentElement.clientWidth) {
// 이들 함수는 DOCTYPE이 존재할 때의 IE 6을 위한 것.
Geometry.getViewportWidth =
fucntion() { return document.documentElement.clientWidth; };
Geometry.getViewportHeight =
function() { return document.documentElement.clientHeight; };
Geometry.getHorizontalScroll =
function() { return document.documentElement.scrollLeft; };
Geometry.getVerticalScroll =
function() { return document.documentElemnet.scrollTop; };
}
else if (document.body.clientWidth) {
// 이들은 IE4, IE5 그리고 DOCTYPE이 없을때의 IE6을 위한 것.
Geometry.getViewportWidth =
function() { return document.body.clientWidth; };
Geometry.getViewportHeight =
function() { return document.body.clientHeight; };
Geometry.getHorizontalScroll =
function() { return document.body.scrollLeft; };
Geometry.getVerticalScroll =
function() { return document.body.scrollTop; };
}
// 이들 함수는 문서의 크기를 반환한다. 브라우저 창과 직접적으로
// 관련은 없지만, 이곳에 함께 정의하여 두는 것이 유용하다.
if (document.documentElement && document.documentElement.scrollWidth) {
Geometry.getDocumentWidth =
function() { return document.documentElement.scrollWidth; };
Geometry.getDocumentHeight =
function() { return document.documentElement.scrollHeight; };
}
else if (document.body.scrollWidth) {
Geometry.getDocumentWidth =
function() { return document.body.scrollWidth; };
Geometry.getDocumentHeight =
function() { return document.body.scrollHeight; };
}
Screen 객체
Window 객체의 screen 프로퍼티는 사용자의 디스플레이 해상도와 표현 가능한
색 수 등의 정보를 담은 Screen 객체를 가리킨다. width와 height 프로퍼티는
디스플레이의 크기를 픽셀단위로 나타낸다. 예를들어 문서 안에 포함될 이미지의
크기를 결정하는 데 이들 프로퍼티 정보를 유용하게 참고할 수 있다.
availWidth와 availHeight 프로퍼티들은 실제로 사용할 수 잇는 디스플레이의
크기를 지정한다. 이 크기에는 데스크탑의 작업 표시줄 등에 의해 사용되는
공간이 제외되어 있다. 파이어폭스 같은 브라우저들의(IE는 예외) Screen
객체에는 availLeft와 availTop 프로퍼티 들이 추가로 정의되어 있는데, 이들
프로퍼티는 화면에서 사용할 수 잇는 첫번째 위치를 가리킨다. 만약 새 브라우저
창을 여는 스크립트에서 이 창을 화면의 중앙에 놓이도록 하기 위해 이들
프로퍼티를 활용할 수 있다.
Navigator 객체
Window 객체의 navigator 프로퍼티는 Navigator 객체를 가리키는데, 이 객체는
브라우저 버전, 출력 가능한 데이터 포맷들의 목록 등 웹 브라우저 전반에 대한
정보를 담고 있다. 과거에는 스크립트가 IE에서 실행되는지 혹은 넷스케이프에서
실행되는지 확인하기 위해 Navigator 객체가 널리 사용되었다. 이러한 브라우저
탐지(browser-sniffing) 접근 방식은 기존 브라우저들의 새 버전이 발표될
때마다 끊임없이 수정해야하기 때문에 문제의 소지가 있으며, 최근에는 그 대신
기능 테스트(capability-testing) 접근 방식을 더 선호한다. 특정 브라우저와
그 브라우저의 기능을 가정하는 대신, 단순히 필요로 하는 기능(예를들면
메서드)의 존재를 테스트하는 것이다. 예를 들어 이벤트 처리기 등록 메서드들과
관련하여 기능 테스트 접근 방식을 사용하는 방법은 다음과 같다.
if (window.addEventListener) {
// 만약 addEventListener() 메서드가 지원된다면 이를 사용.
// 넷스케이프, 모질라, 파이어폭스 등의 표준을 따르는 브라우저
else if (window.attachEvent) {
// 만약 attachEvent() 메서드가 존재한다면 이를 사용.
// 표준을 모방한 IE와 다른 비표준 브라우저
}
else {
// 다른경우에는 사용 가능한 메서드가 없음
// DHTML을 지원하지 않는 오래된 브라우저
}
하지만 특정 브라우저의 특정 버전에만 존재하는 버그를 해결하려 한다면
브라우저 탐지 접근 방식이 여전히 유용하다.
Navigator 객체에는 실행 중인 브라우저의 버전 정보를 제공하려는 목적으로
다섯개의 프로퍼티가 있다.
appName
웹 브라우저의 간단한 이름이다. IE에서는 "Microsoft Internet Explorer"
이며, 파이어폭스 등 넷스케이프에서 유래한(모질라와 넷스케이프 같은)
다른 브라우저들은 "Netscape"이다.
appVersion
브라우저의 버전 숫자 또는 버전과 관련된 기타 정보를 담은 프로퍼티.
이 프로퍼티는 사용자에게 표시되는 버전 숫자와 항상 일치하지는
않으며, 내부적으로 사용되는 버전 숫자임을 주의. 예를들어 넷스케이프
6과 모질라, 파이어폭스의 후속 버전 브라우저들에서는 버전숫자가 5.0
이다. 또한 IE버전 4에서 6까지의 브라우저에서는 4세대 브라우저의
기준 기능들에 대한 호환성을 나타내기 위한 용도때문에 모두 버전숫자가
4.0이다.
userAgent
브라우저가 USER-AGENT HTTP 헤더에 넣어 전송하는 문자열. 이
프로퍼티는 보통 appName과 appVersion의 모든 정보를 포함하며 때로는
더 자세한 정보를 추가로 담고 있기도 하다. 이 정보에 대해서는 표준화된
서식이 없기 때문에 이를 브라우저 독립적인 방식으로 파싱하는것은 거의
불가능.
appCodeName
브라우저의 코드 네임. 넷스케이프는 "Mozilla"라는 코드 네임을 사용한다.
호환성을 위하여 IE도 역시 같은 코드 네임을 사용.
platform
브라우저가 실행되고 있는 하드웨어 플랫폼을 나타낸다. 이 프로퍼티는
자바스크립트 1.2에서 새롭게 추가되었다.
다음 자바스크립트 코드는 대화 상자에 Navigator 객체의 프로퍼티들을
표시한다.
var browser = "BROWSER INFORMATION:\n";
for (var propname in navigator) {
browser += propname + ": " + navigator[propname] + "\n"
}
alert(browser);
Navigator 객체를 사용하여 브라우저 정보를 테스트할 때는 parseInt()
와 String.indexOf() 같은 메서드들을 사용하여 필요한 정보만을
추출해낼 수 있다. 이러한 코드를 가리키는 일반적인 용어는 클라이언트
스니퍼(client sniffer)이며, 인터넷 상에는 이보다 더 범용으로 사용할 수
잇는 복잡한 클라이언트 스니퍼 코드를 찾을 수 있다.(www.mozilla.org/docs/web-developer/sniffer/browser_type.html
을 참고) 하지만 대부분 간단한 코드로도 충분하다.
여기서 집고 넘어가야 할 중요한 점은 Navigator 객체의 프로퍼티가
알려주는 브라우저 정보가 완전히 신뢰할 수 있는 것은 아니라는 것이다.
예를들어 파이어폭스 1.0에서 appName은 "Netscape"이며 appVersion은
'5.0'으로 시작한다. 모질라 코드에 기반하지 않은 사파리(Safari)
브라우저에서도 똑같은 값이 반환된다. 또한 IE6.0에서 appCodeName은
"Mozilla"이며 appVersion은 '4.0'으로 시작한다. 이것은 오래 전에
배포된 브라우저 탐지 코드들이 아주 많기 때문이며, 만약 이 프로퍼티들을
갱신하면 수많은 웹 페이지들의 호환성이 깨지는데, 이를 브라우저
제작자가 감당할 수 없기 때문이다. 이것이 바로 브라우저 탐지 기법의
쓸모가 줄어들고 대신에 기능 테스트를 선호하는 이유 중 하나다.
0