안녕하세요 포스팅에서는 구형 웹 브라우저를 체크하여 경고창을 띄우거나 다른 웹을 그리게 하는 방법에 대하여 소개하겠습니다.
이 방법을 소개하게된 이유는 현재 진행 중인 프로젝트에서 구형 웹 브라우저에서 웹 화면이 정상적으로 작동하지 않는 문제를 발견하였기 때문입니다. 문제를 해결하고 블로그에 포스팅하면 좋을 기술이겠다 싶어서 올리게 되었습니다.
우선, IE 10 미만의 버전에서는 조건부 주석이라는 방법으로 해결할 수가 있습니다.
해당 HTML에서 아래와 같은 형태로 조건부 주석을 사용할 수 있습니다.
<!--[if condition]>
HTML 코드
<![endif]-->
조건부 주석에 사용되는 기호
| ! | 부정 | [if !ie] ie가 아니라면 |
| lt | 작다 | [if lt ie 7] ie7보다 작다면 |
| lte | 작거나 같다 | [if lte ie 7] ie7보다 작거나 같다면 |
| gt | 크다 | [if gt ie 7] ie7보다 크다면 |
| gte | 크거나 같다 | [if gte ie 7] ie7보다 크거나 같다면 |
| () | 우선 처리 | |
| & | 그리고 | [if (gte ie 5)&(lt ie 9)] ie7보다 크고 ie 9 미만이라면 |
| | | 또는 | [if (ie 5)&(ie 9)] ie7이거나 ie 9이면 |
조건부 주석 사용 예
<!--[if lt IE 7]>
<script>
alert("해당 브라우저는 ie 7 보다 낮은 버전입니다.")
</script>
<![endif]-->
위의 코드처럼 적는다면 경고창이 뜰것입니다.
하지만 IE 10 이상의 브라우저에서는 조건부 주석 기능이 불가능해져서 다른 기능을 사용해야합니다.
아래 코드가 IE 10 이상 브라우저에서도 사용가능한 함수입니다. 이 함수가 브라우저의 버전을 확인하고 그 반환 값을 사용하여 문구들을 나오게 만들 수 있습니다.
<script>
function BrowserVersionCheck() {
var word;
var versionOrType = "another";
var ieName = navigator.appName;
var agent = navigator.userAgent.toLowerCase();
/*** 1. IE 버전 체크 ***/
// IE old version ( IE 10 or Lower )
if ( ieName == "Microsoft Internet Explorer" ){
word = "msie ";
}else{
// IE 11
if( agent.search("trident") > -1 ) word = "trident/.*rv:";
// IE 12 ( Microsoft Edge )
else if( agent.search("edge/") > -1 ) word = "edge/";
}
var reg = new RegExp( word + "([0-9]{1,})(\\.{0,}[0-9]{0,1})" );
if ( reg.exec( agent ) != null ) versionOrType = RegExp.$1 + RegExp.$2;
if( versionOrType == "another" ){
if (agent.indexOf("chrome") != -1) versionOrType = "Chrome";
else if (agent.indexOf("opera") != -1) versionOrType = "Opera";
else if (agent.indexOf("firefox") != -1) versionOrType = "Firefox";
else if (agent.indexOf("safari") != -1) versionOrType = "Safari";
}
if(versionOrType !== ("Chrome" || "Opera" || "Firefox" || "Safari") ) {
return alert("이 브라우저는 지원하지 않습니다. \n(지원 브라우저: Chrome, Opera, Firefox, Safari, Edge 그 외 Chrome 기반 브라우저)")
}
return versionOrType;
};
BrowserVersionCheck();
</script>
위에 코드들을 이해하기 위해선 javascript에서 지원하는 Navigator라는 객체를 이해해야합니다.
developer.mozilla.org/ko/docs/Web/API/Navigator
Navigator - Web API | MDN
Navigator 인터페이스는 사용자 에이전트의 상태와 신원 정보를 나타냅내며, 스크립트로 해당 정보를 질의할 때와 애플리케이션을 특정 활동에 등록할 때 사용합니다. Navigator 객체는 window.navigator
developer.mozilla.org
위에 MDN 문서가 자세하게 설명되어있지만 간단하게 포스팅하자면
| 종류 | 설명 |
| navigator.appCodeName | 브라우저의 코드명을 반환 |
| navigator.appName | 브라우저의 이름을 반환 |
| navigator.appVersion | 브라우저 버전을 반환 |
| navigator.cooikeEnabled | 브라우저의 쿠키 사용 가능 여부 반환 |
| navigator.language | 브라우저에서 사용되는 언어를 반환 |
| navigator.onLine | 브라우저가 온라인인지 여부 반환 |
| navigator.platform | 브라우저가 실행되는 플랫폼 정보 반환 |
| navigator.product | 브라우저에서 사용되는 엔지 이름 반환 |
| navigator.userAgent | 브라우저와 운영체제 정보 반환 |
예제 결과
브라우저의 코드명[navigator.appCodeName] : Mozilla
브라우저의 이름[navigator.appName] : Netscape
브라우저의 버전[navigator.appVersion] : 5.0 (Macintosh; Intel Mac OS X 10_15_0)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36
쿠키 사용 가능 여부[navigator.cookieEnabled] : true
브라우저에서 사용되는 언어[navigator.language] : ko-KR
온라인인지 여부[navigator.onLine] : true
플랫폼 정보[navigator.platform] : MacIntel
엔진 이름[navigator.product] : Gecko
운영체제 정보[navigator.userAgent] : Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_0)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<title>nviagtor</title>
<script>
let nowAppCodeName = navigator.appCodeName;
let nowAppName = navigator.appName;
let nowAppVersion = navigator.appVersion;
let nowCookieEnabled = navigator.cookieEnabled;
let nowLanguage = navigator.language;
let nowOnLine = navigator.onLine;
let nowPlatform = navigator.platform;
let nowProduct = navigator.product;
let nowUserAgent = navigator.userAgent;
document.write("브라우저의 코드명[navigator.appCodeName] : " + nowAppCodeName, "<br>");
document.write("브라우저의 이름[navigator.appName] : " + nowAppName, "<br>");
document.write("브라우저의 버전[navigator.appVersion] : " + nowAppVersion, "<br>");
document.write("쿠키 사용 가능 여부[navigator.cookieEnabled] : " + nowCookieEnabled, "<br>");
document.write("브라우저에서 사용되는 언어[navigator.language] : " + nowLanguage, "<br>");
document.write("온라인인지 여부[navigator.onLine] : " + nowOnLine, "<br>");
document.write("플랫폼 정보[navigator.platform] : " + nowPlatform, "<br>");
document.write("브라우저 엔진 이름[navigator.product] : " + nowProduct, "<br>");
document.write("운영체제 정보[navigator.userAgent] : " + nowUserAgent, "<br>");
</script>
</head>
<body>
</body>
</html>이런 식으로 결과값들을 확인할 수 있고
우리가 원하는 인터넷 익스플로러인지 알아보기 위해서는 javascript 내장 메서드인 indexOf()를 사용해야 한다. 이 자료도 마찬가지로 아래 MDN 문서에 잘 나와 있지만 간단하게 설명하겠습니다.
developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf
String.prototype.indexOf() - JavaScript | MDN
indexOf() 메서드는 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 일치하는 값이 없으면 -1을 반환합니다. The source for this interactive example is stored in a GitHub repository.
developer.mozilla.org
indexOf() 메서드는 특정 문자열 안에 해당 값이 없으면 -1 을 반환하고 있으면 숫자 값들을 반환하는데 그 값이 일정한 값이 아니라서 원하는 문자가 있는 것을 찾고 싶다면 !== -1 이런 식으로 찾아줘야한다.
'Blue Whale'.indexOf('Blue') !== -1; // true
'Blue Whale'.indexOf('Bloe') !== -1; // false
인터넷 익스플로러에는 navigator.userAgent에 구형버전은 'MSIE'라는 문자가 포함되어있고 10.0버전 이상에는 "Trident"라는 문자가 포함되어있다. 따라서 저 두 문자열이 포함되어 있는 브라우저를 찾고 해당 브라우저에서만 경고창을 띄우면 된다. indexOf() 메서드는 대 소문자를 구분하기 때문에 navigator 객체를 사용해서 반환된 값들을 소문자나 대문자로 바꿔주고 판단하면 된다.( toLowerCase(), toUpperCase() 메서드 사용 )
<!-- 브라우저 버전체크 -->
<script>
(function BrowserVersion() {
let agent = navigator.userAgent.toLowerCase();
console.log((agent.indexOf("trident") || agent.indexOf("msie")) !== -1)
if((agent.indexOf("trident") || agent.indexOf("msie")) !== -1) {
alert("해당 브라우저는 지원하지 않습니다. \n(지원 브라우저: Chrome, Opera, Firefox, Safari, Edge 그 외 Chrome 기반 브라우저)")
}
})();
</script>
위와 같은 코드로 간단하게 인터넷 익스플로러 브라우저를 체크하고 경고창을 띄울수 있다.
'학습노트 > 기초지식' 카테고리의 다른 글
| [node.js] req.body가 안 보내질 때 (0) | 2021.03.15 |
|---|---|
| npm install bcrypt error 해결 방법 (0) | 2020.11.11 |
| How to send a request body with a DELETE request (axios) (0) | 2020.11.11 |
| [GitHub] github 기초 용어와 github desktop설치방법 (0) | 2020.10.14 |
| [Express] express와 사용방법 (0) | 2020.10.08 |
