브라우저 확인 스크립트 - 브라우저 엔진 알아내는 방법 > 웹제작/운영

브라우저 알아내기

브라우저 엔진 확인 방법

홈페이지를 만들다보면, 브라우저에 따라 레이아웃이 다르게 보일 때가 있다.

이럴 때는 각 브라우저별로 제작을 해야 하는데, 이럴 때 사용하는 브라우저 엔진 판별 방법을 설명한다.

브라우저 확인 스크립트 - 브라우저 엔진 알아내는 방법

브라우저 엔진에 대한 이해

우선 알아둘 것은, 현대 브라우저는 어떤 엔진을 사용하냐에 따라서 공통점을 가진다는 것이다. 

그러므로 정확히 하자면, 브라우저를 알아내는 방법이라기 보다는 엔진을 알아내는 방법이라고 하는 것이 더 옳을 것이다. 

대표적인 엔진은 아래와 같다.

• 크롬 : 크로미엄(블링크) 엔진 (원래는 웹킷 엔진이었으나 블링크 엔진으로 바뀜)
• 파이어폭스 : 게코 엔진
• 사파리 : 웹킷 엔진
• 엣지 : 크로미엄 엔진
• 익스플로러 : 트라이던트 엔진

예를 들어, 다른 브라우저에는 다 정상적으로 나타나는데 파이어폭스에서만 모양이 다르다면 아래처럼 파이어폭스인지를 알아내서 다른 코드를 추가로 넣어주면 되는 것이다.

브라우저 확인 스크립트 코드

어떤 엔진을 사용하는지를 알아내는 기본적인 소스 코드는 아래와 같다.

즉, 이것을 기본으로 해서 만드는 것이 바로 브라우저 확인 방법인 것이다.

[code]

<script>

   var agent = navigator.userAgent.toLowerCase();

   if (agent.indexOf("엔진 종류") != -1) {

      사용할 내용

   }

</script>

[/code]

위 코드 중에서 "엔진 종류"라고 적힌 부분에 브라우저 이름을 넣어주는 것이 브라우저 엔진을 확인하는 방법이 된다.

• 크롬 : chrome
• 파이어폭스 : firefox
• 사파리 : safari

단, 익스플로러 브라우저 엔진 확인과 네스케이프 엔진 확인 방법은 조금 다르다. 

이 경우엔 아래와 같이 한다.

[code]

<script>

   var agent = navigator.userAgent.toLowerCase();

   if ( (navigator.appName == 'Netscape' && navigator.userAgent.search('Trident') != -1) || (agent.indexOf("msie") != -1) ) {

      사용할 내용

   }

</script>

[/code]

그 이후엔 제작자의 몫이다. "사용할 내용"이라는 부분에 

alert("알림 메시지 내용"); 을 넣든, 그 외 실행될 코드를 넣든 하면 되는 것이다.

브라우저 알아내는 방법 코드 예제

아래는 일반적으로 사용하는 브라우저 확인 소스 예제다

[code]

<script>

   var agent = navigator.userAgent.toLowerCase();

   if (agent.indexOf("firefox") != -1) {

     alert("파이어폭스 - 게코 엔진");

   }

</script>

[/code]

이렇게 하면 브라우저가 파이어폭스일 때 게코 엔진을 사용하고 있다는 안내 메시지가 뜬다. 

[code]

<script>

   var agent = navigator.userAgent.toLowerCase();

   if (agent.indexOf("chrome") != -1) {

     alert("크로미엄 - 엔진을 공통으로 사용하는 브라우저");

   }

</script>

[/code]

위 소스 코드 예제는 크롬, 웨일, 비발디, 오페라, 얀덱스 브라우저 등인지를 알아내는 방법이다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)

같은 엔진을 사용할 경우 지원되는 것이 같으므로 같은 브라우저라고 생각해도 된다.

다만 부가 추가 기능만 다를 뿐....