웹 브라우저의 종류와 버전을 세밀하게 구분하는 방법
페이지 정보
작성자 서방님 댓글 0건 조회 204회 작성일 11-08-05 09:18본문
우선 넷스케이프 6이상인 경우를 구분하려면 다음과 같은 방법을 사용하면 된다.
|
ns6 = !document.all && |
document.all가 거짓(false)이고 document.getElementById만 참(True)인 경우 인터넷 익스플로러는 해당 코드를 사용하지 않으면서 넷스케이프가 6이상인 경우만 해당 코드를 사용할 수 있게 된다.
넷스케이프 6 이상이면서 오페라(Opera)는 사용하지 못하도록 하려면? 그 방법은 다음과 같다.
|
ns6noopera = !document.all && |
아주 가끔이긴 하지만, 오페라 7과 오페라 6을 구분해야 하는 경우도 있다. 이는 오페라 7의 여러 가지 새로운 기능 때문인데 그 방법은 다음과 같다.
|
opera7 = window.opera && |
오페라 6 이하의 경우는 다음과 같다.
|
oldopera = window.opera && |
또 다른 경우로, 맥킨토시용 IE 5와 다른 브라우저를 구분해야 하는 경우가 있다. 다음은 윈도 기반에서의 인터넷 익스플로러 5 이상에서는 돌아가지 않고 맥킨토시용 인터넷 익스플로러 5 이상에서만 코드가 돌아가도록 하기 위한 조건이다.
|
macie5 = document.all && |
만일 위 조건에서 인터넷 익스플로러 4는 사용할 수 없도록 하기 위한 조건을 추가하려면 다음과 같이 하면 된다.
|
macie5notothers = document.all && |
윈도 기반의 인터넷 익스플로러의 경우를 좀 더 살펴보자. 만일 인터넷 익스플로러 4 이상에선 사용되지만 오페라의 경우는 사용하고 싶지 않은 경우 다음과 같은 조건을 사용하면 된다.
|
Ie4upnoopera =document.all && |
만일 인터넷 익스플로러 5.0에서만 돌아가도록 하기 위한 조건을 만들려면 약간의 변칙이긴 하지만 다음과 같이 해줄 수 있다.
|
ie5 = document.all && |
인터넷 익스플로러 5.5에서만 돌아가도록 하기 위한 조건을 만들려면 다음과 같이 하면 된다.
|
ie55= document.all && |
인터넷 익스플로러 6에서만 돌아가도록 하기 위한 조건을 만들려면 다음과 같이 하면 된다.
|
ie6 = document.all && |
지금까진 각각의 브라우저 종류와 버전마다 지원하는 객체의 종류를 이용하여 세밀하게 브라우저 종류와 버전을 구분하는 방법에 대해 살펴보았다.
<HTML>
<HEAD>
<p><center><font color="navy"><b>▶ </b></font>
<a href="http://korea.internet.com/channel/list.asp?cid=189&zid=12"><font color="navy"><b>코리아인터넷닷컴 자바스크립트 소스/예제 모음</b></font></a></center><p>
</head>
<body text="#000000" bgcolor="#C0C0C0" link="#0000A0" vlink="#0000FF" alink="#FF0000" marginheight="10" marginwidth="10" leftmargin="10" topmargin="10">
<font size="2">이 스크립트는 각 브라우저의 버전을 체크하여 현재 페이지를 즐겨찾기에 추가시키는 예제이다. 이 페이지를 즐겨찾기에 추가하고 싶으면 아래 링크를 클릭해 보기 바란다. 이와 관련된 설명은 소스 안에 자세히 설명 되어 있다.</font><p>
<center>
<font face="arial" color="black" size="1">브라우저 버전 체크를 통한 즐겨찾기 추가 스크립트 예제</font>
<br>
<font face="Arial" size="+1" color="Black">
<script language="JavaScript">
<!--
/******************************************************************
이 스크립트는 현재 페이지를 즐겨찾기에 추가할 수 있는 스크립트이다.
즐겨찾기하고 싶은 페이지의 타이틀, URL 등은 지정하지 않아도 알아서
설정해 준다.
이 즐겨찾기 추가 스크립트는 인터넷 익스프롤러 4 이상에서만 동작한다.
그러므로 각 브라우저를 체크하여 그에 따른 메시지를 보여줄 수 있어야 한다.
*******************************************************************/
function addtofavorites() { if (document.all) window.external.AddFavorite(favurl,favtitle) }
/* if (document.all)은 사용하는 브라우저가 인터넷 익스플로러인지를 체크한다. 만일 인터넷 익스프롤러이면 정상적으로 즐겨찾기 추가 메쏘드를 사용하면 된다.*/
var favurl=document.location
/* 현재 문서의 URL 정보를 얻어 온다.*/
var favtitle=document.title
/* 현재 문서의 타이틀 정보를 얻어 온다.*/
bName = navigator.appName;
bVer = parseInt(navigator.appVersion);
if(bName == "Netscape" && bVer >= 4)br = "n4";
else if(bName == "Netscape" && bVer == 3)br = "n3";
else if(bName == "Microsoft Internet Explorer" && bVer == 4)br = "e4";
else if(bName == "Microsoft Internet Explorer")br = "e3";
else br="n2";
/* 현재 사용하고 있는 브라우저의 종류와 버전을 조사한다.*/
if(br =="e4"){
document.write('<a href="\"javascript:addtofavorites()\"><font size=\"2\"><b>');
document.write('이 페이지를 즐겨찾기에 추가하세요!</b></font></a>')
}
/* 인터넷 익스프로러 4 이상이면 addfavorites 함수 호출 가능*/
else if(br =="n4"){
document.write('넷스케이프 4 이상 사용자를 위한 메시지 출력')
document.write('이 페이지를 북마크하시려면 CTRL+D 키를 누르세요')
}
/* 넷스케이프 4 이상일 경우 처리하고 싶은 모듈 삽입*/
else if(br =="n3"){
document.write('넷스케이프 3 사용자를 위한 메시지 출력')
}
/* 넷스케이프 3일 경우 처리하고 싶은 모듈 삽입*/
else if(br =="e3"){
document.write('익스플로러 3 사용자를 위한 메시지 출력')
}
/* 익스플로러 3일 경우 처리하고 싶은 모듈 삽입*/
else{
alert ("현재 사용하고 계신 브라우저가 넷스케이프도, 익스플로러도 아닙니다. 즐겨찾기에 추가 기능을 사용하려면 인터넷 익스플로러 4 이상의 브라우저가 필요합니다.")
document.write('원하는 메시지 출력')
}
/* 넷스케이프도, 익스플로러도 아닌 브라우저를 사용하는 사람들을 위한 모듈 삽입 */
//-->
</script>
</font>
</center>
<br><br><br>
<p align="center"><a href="/channel/content.asp?kid=13&nid=15569#test"><img src="/images/w_list3.gif" border="0"></a></p>
</BODY>
</HTML>
브라우저 구분 관련 스크립트
<script language="javascript">
document.write("appName : " + navigator.appName + "<br>");
document.write("appVersion : " + navigator.appVersion + "<br>");
document.write("userAgent : " + navigator.userAgent + "<br>");
document.write("platform : " + navigator.platform + "<br>");
if(navigator.userAgent.indexOf("MSIE 8.0") > 0 ){
document.write("IE8")
}
else if(navigator.userAgent.indexOf("MSIE 7.0") > 0 ){
document.write("IE7")
}
else if(navigator.userAgent.indexOf("MSIE 6.0") > 0 ){
document.write("IE6")
}
else if(navigator.userAgent.indexOf("Firefox") > 0 ){
document.write("Firefox")
}
else if(navigator.userAgent.indexOf("Safari") > 0 ){
document.write("Safari")
}
else if(navigator.userAgent.indexOf("Chrome") > 0 ){
document.write("Chrome")
}
</script>
익스플로어와 기타 브라우저에 스타일 구분하기..
<html>
<head>
<title>http://www.blueb.co.kr</title>
<script-x type="text/javascript-x">
<!--
if ((navigator.appName).indexOf("Microsoft")!=-1) {
document.write('<link rel="stylesheet" href="styleIE.css" type="text/css">');
}
else {
document.write('<link rel="stylesheet" href="style.css" type="text/css">');
}
//-->
</script-x>
</head>
<body>
본 예제는 미리보기 예제가 없습니다. <head></head>소스를 자신에 홈피에 복사한 후 설정된 스타일을 각각 지정해주면 됩니다.
댓글목록
등록된 댓글이 없습니다.
