[Javascript] 사용자가 접속한 브라우저 확인하기

코드

Chrome 브라우저 외의 브라우저에서 접속했을 때 경고창을 띄워주기 위한 코드를 작성해보았다.

function isBrowserCheck(){ 
	const agt = navigator.userAgent.toLowerCase(); 
	if (agt.indexOf("chrome") != -1) return 'Chrome'
	if (agt.indexOf("opera") != -1) return 'Opera'
	if (agt.indexOf("staroffice") != -1) return 'Star Office'
	if (agt.indexOf("webtv") != -1) return 'WebTV'
	if (agt.indexOf("beonex") != -1) return 'Beonex'
	if (agt.indexOf("chimera") != -1) return 'Chimera'
	if (agt.indexOf("netpositive") != -1) return 'NetPositive'
	if (agt.indexOf("phoenix") != -1) return 'Phoenix'
	if (agt.indexOf("firefox") != -1) return 'Firefox'
	if (agt.indexOf("safari") != -1) return 'Safari'
	if (agt.indexOf("skipstone") != -1) return 'SkipStone'
	if (agt.indexOf("netscape") != -1) return 'Netscape'
	if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla'
	if (agt.indexOf("msie") != -1) { 
    	let rv = -1; 
		if (navigator.appName == 'Microsoft Internet Explorer') { 
			let ua = navigator.userAgent; var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})")
		if (re.exec(ua) != null) 
			rv = parseFloat(RegExp.$1)
		} 
		return 'Internet Explorer '+rv
	} 
}

function checkBrowser(){
    const browser = isBrowserCheck()
    console.log(browser)
    if(browser !== 'Chrome'){
        alert('You should use "Chrome". Otherwise, you can have a screen ratio problem.')
    }
}

 

접속한 브라우저 체크 : https://velog.io/@___/javascript-%EC%A0%91%EC%86%8D%ED%95%9C-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%ED%99%95%EC%9D%B8

실행 결과

 

 

Internet Explorer로 접속했을 때

firefox로 접속했을 때

+ 특이사항

Microsoft Edge로 접속하면 해당 경고문구가 뜨지 않고 콘솔결과를 확인했을 때 "Chrome"으로 출력되는 것을 확인할 수 있었다.

agt 결과를 출력해보니 아래와 같았고 chrome을 검사하기 전에 edge인지 우선 확인하도록 변경하였다.

const agt = navigator.userAgent.toLowerCase()
console.log(agt)
// mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko)
// chrome/85.0.4183.83 safari/537.36 edg/85.0.564.41

if (agt.indexOf("edg") != -1) return 'Edge'

코드를 추가하고 Microsoft Edge를 실행한 결과