자바 스크립트 : 사용자 브라우저가 Chrome인지 확인하는 방법

브라우저가 Chrome 인지 확인하려면 부울 값을 반환하는 함수가 필요합니다 .

그러한 기능을 어떻게 만듭니 까?

업데이트 : 이를 처리하는 업데이트 된 방법 은 Jonathan의 답변 을 참조하십시오 . 아래의 답변은 여전히 ​​작동 할 수 있지만 다른 브라우저에서 일부 오 탐지를 유발할 수 있습니다.

var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

그러나 언급 한 바와 같이 사용자 에이전트는 스푸핑 될 수 있으므로 다른 답변에서 언급 했듯이 이러한 문제를 처리 할 때 항상 기능 감지 (예 : Modernizer ) 를 사용하는 것이 가장 좋습니다 .

브라우저가 Chrome 인지 확인하려면 다음을 시도하십시오.

// please note, 
// that IE11 now returns undefined again for window.chrome
// and new Opera 30 outputs true for window.chrome
// but needs to check if window.opr is not undefined
// and new IE Edge outputs to true now for window.chrome
// and if not iOS Chrome check
// so use the below updated condition
var isChromium = window.chrome;
var winNav = window.navigator;
var vendorName = winNav.vendor;
var isOpera = typeof window.opr !== "undefined";
var isIEedge = winNav.userAgent.indexOf("Edge") > -1;
var isIOSChrome = winNav.userAgent.match("CriOS");

if (isIOSChrome) {
   // is Google Chrome on IOS
} else if(
  isChromium !== null &&
  typeof isChromium !== "undefined" &&
  vendorName === "Google Inc." &&
  isOpera === false &&
  isIEedge === false
) {
   // is Google Chrome
} else { 
   // not Google Chrome 
}

사용 예 : http://codepen.io/jonathan/pen/WpQELR

Chrome 관리자를 사용하고 콘솔 탭으로 이동하면 이것이 작동하는 이유입니다. 'window'를 입력하고 Enter를 누르십시오. 그런 다음 '창 개체'에 대한 DOM 속성을 볼 수 있습니다. 객체를 축소하면 'chrome'속성을 포함한 모든 속성을 볼 수 있습니다.

더 이상 IE를 확인하기 위해 equals를 true로 사용할 수 없습니다 window.chrome. IE는 돌아 왔지만 undefined이제는 돌려줍니다 true. 그러나 IE11은 이제 undefined를 다시 반환합니다. IE11은 빈 문자열을 반환 ""를 들어 window.navigator.vendor.

이게 도움이 되길 바란다!

최신 정보:

아래를 지적 해 주신 Halcyon991 에게 감사드립니다 . 새로운 Opera 18+도 true로 출력됩니다 window.chrome. 과 같은 오페라 18 을 기반으로 크롬 (31) . 그래서 window.navigator.vendoris is "Google Inc"and not is 확인하는 검사를 추가했습니다 "Opera Software ASA". 또한 Ring 과 Adrien Be 덕분 에 Chrome 33이 더 이상 true를 반환하지 않는 것에 대해 알려 드리겠습니다. window.chrome이제 null이 아닌지 확인합니다. 그러나 IE11에 세심한주의를 기울이면서 IE11이 처음 릴리스되었을 때와 같이 undefined출력 이후로 다시 확인을 추가 undefined했습니다. 그런 다음 일부 업데이트 빌드 후에 ..로 출력되었습니다 true. 이제 최근 업데이트 빌드가 undefined다시 출력 됩니다. Microsoft는 마음을 만들 수 없습니다!

2015 년 7 월 24 일 업데이트 -Opera check 추가

오페라 30이 막 출시되었습니다. 더 이상 출력되지 않습니다 window.opera. 또한 window.chrome새로운 Opera 30 에서도 true로 출력됩니다. 따라서 OPR 이 userAgent 에 있는지 확인해야합니다 . Chrome 30과 동일한 렌더 엔진을 사용하기 때문에 Opera 30의 새로운 변경 사항을 설명하기 위해 위의 조건을 업데이트했습니다.

2015 년 10 월 13 일 업데이트 -IE 확인 추가

그것으로 인해 출력에 IE 에지 검사를 추가 true위해 window.chrome비록 IE11 출력 .. undefined대한 window.chrome. 이에 대해 알려 주신 artfulhacker 에게 감사드립니다 !

업데이트 2/5/ 2016-iOS Chrome 확인 추가

iOS에서 Chrome CriOS을 출력 true하기 때문에 iOS Chrome 검사를 추가 했습니다 . 이에 대해 알려 주신 xinthose 에게 감사드립니다 !

2018 년 4 월 18 일 업데이트 -Opera 점검 변경

Chrome 66 에 포함 된 Opera 확인 기능 window.opr이 수정 되었습니다 . 덕분에 서리가 내린 Z 와 다니엘 Wallman 이를보고!undefinedOPRwindow.navigator.vendor

더 짧은 : var is_chrome = /chrome/i.test( navigator.userAgent );

훨씬 간단한 해결책은 다음과 같습니다.

var isChrome = !!window.chrome;

는 !!단지 부울 값으로 개체를 변환합니다. Chrome 이외의 브라우저에서이 속성은 undefined입니다.

Chrome을 기반으로하는 Edge 버전에서도 마찬가지입니다 (@Carrm 덕분에 지적했습니다).

var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() );

특정 버전의 Chrome을 원할 수도 있습니다.

var ua = navigator.userAgent;
if(/chrome/i.test(ua)) {
    var uaArray = ua.split(' ')
    ,   version = uaArray[uaArray.length - 2].substr(7);
}

내 답변을 사용하여 Big Lebowski에게 사과드립니다.

당신이 사용할 수있는:

navigator.userAgent.indexOf("Chrome") != -1

v.71에서 작업 중입니다.

Mac 용 Chrome에서 작동합니다. 위의 모든 것보다 더 간단하거나 신뢰할 수있는 것 같습니다 (userAgent 문자열이 테스트 된 경우).

        var isChrome = false;
        if (window.chrome && !window.opr){
            isChrome = true;
        }
        console.log(isChrome);

사용자는 사용자 에이전트를 변경할 수 있습니다. 요소의 객체 webkit에서 접두사 속성을 테스트하십시오.stylebody

if ("webkitAppearance" in document.body.style) {
  // do stuff
}

이것을 확인하십시오 : Safari, Chrome, IE, Firefox 및 Opera 브라우저를 감지하는 방법?

귀하의 경우 : var isChrome = !! window.chrome && (!! window.chrome.webstore || !! window.chrome.runtime);

다른 데스크탑 브라우저 (Firefox, IE, Opera, Edge, Chrome)의 이름을 알기 위해 사파리 제외.

function getBrowserName() {
  var browserName = '';
  var userAgent = navigator.userAgent;
  (typeof InstallTrigger !== 'undefined') && (browserName = 'Firefox');
  ( /* @cc_on!@*/ false || !!document.documentMode) && (browserName = 'IE');
  (!!window.chrome && userAgent.match(/OPR/)) && (browserName = 'Opera');
  (!!window.chrome && userAgent.match(/Edge/)) && (browserName = 'Edge');
  (!!window.chrome && !userAgent.match(/(OPR|Edge)/)) && (browserName = 'Chrome');

  /**
   * Expected returns
   * Firefox, Opera, Edge, Chrome
   */
  return browserName;
}

다음 브라우저 버전에서 작동합니다.

Opera - 58.0.3135.79
Firefox - 65.0.2 (64-bit)
IE - 11.413.15063 (JS Fiddle no longer supports IE just paste in Console)
Edge - 44.17763.1.0
Chrome - 72.0.3626.121 (Official Build) (64-bit)

여기서 요점 과 여기 에서 바이올린을 보십시오.

원래 코드 스 니펫은 더 이상 Chrome에서 작동하지 않았으며 찾은 위치를 잊었습니다. 그것은 전에 사파리를 가졌지 만 더 이상 사파리에 액세스 할 수 없으므로 더 이상 확인할 수 없습니다.

Firefox 및 IE 코드 만 원래 스 니펫의 일부였습니다.

Opera, Edge 및 Chrome 검사는 간단합니다. userAgent에 차이가 있습니다. OPROpera에만 존재합니다. EdgeEdge에만 존재합니다. 따라서 Chrome을 확인하려면 이러한 문자열이 없어야합니다.

파이어 폭스와 IE는 그들이 무엇을하는지 설명 할 수 없습니다.

내가 쓰고 있는 패키지 에이 기능을 추가 할 것이다

모든 답변이 잘못되었습니다. "Opera"와 "Chrome"은 모든 경우에 동일합니다.

(편집 된 부분)

여기에 정답이 있습니다

if (window.chrome && window.chrome.webstore) {
    // this is Chrome
}