브라우저 이슈

최초의 브라우저 언어인 html은 팀버너스리가 만들고 알렸지만, 사용자들이 먼저 접했던 브라우저 애플리케이션은 네스케이프이다.

네스케이프는 자사의 경쟁력을 높이기 위해 만든 언어가 자바스크립트이다.

네스케이프 이후, 마이크로소프트가 브라우저의 경쟁력을 예견하고, MS의 운영체제에 익스플로러를 넣어 배포하게 되면서, 유료인 브라우저(네스케이프) 사용자들이 무료인(IE)로 갈아타는 현상이 보편화 되면서 브라우저 전쟁이 일게 되었다. 

기능적인 면에서 경쟁을 하면서 무질서해지고, 예를 들어

 

이벤트를 추가하는 메소드도 다른데  넷:addEventListener, IE:attatchEvent라는 이벤트를 써야 하면서 개발자들의 불만이 많아지게 되어, 다년간 그 불만이 축적되어 니즈를 맞춰 나온게 [웹표준(web standard)]이다.

표준화기구가 브라우저 시장의 규격을 맞추어 스펙을 정의하고, 브라우저벤더(업체)들이 표준을 준수하고(같은기능=같은API을 사용 등), 제작하는 퍼블리셔, 개발자들은 이 문법을 준수하여 개발 및 제작 하고 있다.

 

그 중심에 네비게이터라는 객체가 있다. 이를 통해 브라우저를 알아낼수 있기 때문.

 

목표 : 네비게이터라는 객체를 알자.

 

1.

console.log

console.dir(navigator); 하면,  navigator의 속성이 무엇이 있는지 알수 있다.

console.fir(navigator.appName)

console.fir(navigator.appVersion)

console.dir(navigator.userAgent);으로 확인, 브라우저는 서버에 어떤 정보가 필요한지 전달한다.

 

2. 기능테스트

브라우저는 계속 바뀌고, 종류가 많기 때문에 기능테스트를 통해 크로스브라우징 이슈를 잘 해결해야 한다.

자바스크립트에는 object라는 객체가 있다.

Object.keys : 이 메소드는 객체의 key값을 배열로 리턴하는 object의 메소드이다. 이 메소드는 ECMA5에 추가 되어 오래전 자바스크립트에는 호환되지 않는다. 아래 코드를 통해 호환성을 맞출수 있다.

------------------------------------------------------

if (!Object.keys) { //브라우저에 keys내장객체가 없다면 아래의 브라우저기능테스트를 실행

Object.keys = (function () { 

'use strict';

var hasOwnProperty = Object.prototype.hasOwnProperty,

hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'),

dontEnums = [

'toString',

'toLocaleString',

'valueOf',

'hasOwnProperty',

'isPrototypeOf',

'propertyIsEnumerable',

'constructor'

],

dontEnumsLength = dontEnums.length;

return function (obj) {

if (typeof obj !== 'object' && (typeof obj !== 'function' || obj === null)) {

throw new TypeError('Object.keys called on non-object');

}

var result = [], prop, i;

for (prop in obj) {

if (hasOwnProperty.call(obj, prop)) {

result.push(prop);

}

 

 

 

}

 

if (hasDontEnumBug) {

for (i = 0; i < dontEnumsLength; i++) {

if (hasOwnProperty.call(obj, dontEnums[i])) {

result.push(dontEnums[i]);

}

}

}

return result;

};

}());

}

 

웹브라우저 자바스크립트>Naviagator 객체