JavaScript:사용자 브라우저가 Chrome인지 확인하는 방법

JavaScript:사용자 브라우저가 Chrome인지 확인하는 방법

브라우저가 크롬인지 확인하기 위해 부울값을 반환하는 함수가 필요합니다.

이러한 기능을 작성하려면 어떻게 해야 합니까?

브라우저가 Google 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("Edg") > -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 
}

사용 예: https://codepen.io/jonathan/pen/RwQXZxJ?editors=1111

이것이 작동하는 이유는 Google Chrome 검사기를 사용하여 콘솔 탭으로 이동하기 때문입니다.'window'를 입력하고 Enter 키를 누릅니다.그런 다음 '창 개체'의 DOM 속성을 볼 수 있습니다.개체를 축소하면 '크롬' 속성을 포함한 모든 속성을 볼 수 있습니다.

가 true인 경우 수 .window.chrome 는 반환에 사용됩니다.undefined 돌아오다, 다시 돌아오다.true그러나 IE11은 다시 정의되지 않은 상태로 반환됩니다.IE11에서는 빈 문자열도 반환됩니다.""★★★★★★에window.navigator.vendor.

도움이 됐으면 좋겠네요!

갱신:

Halcyon991에게 감사드리며, 새로운 Opera 18+는 다음에도 true로 출력됩니다.window.chrome오페라 18은 크롬 31을 기반으로 한 것 같아요그래서 체크도 추가해서window.navigator.vendor 말합니다."Google Inc" 않다"Opera Software ASA"또한 Ring과 Adrien Be 덕분에 Chrome 33이 더 이상 true로 돌아오지 않게 되었습니다. window.chrome이제 늘이 아닌지를 확인합니다. IE11에 .IE11의 했습니다.저는 다음 항목에 대한 체크백을 추가했습니다.undefined이 IE11을 출력하게 때문에undefined★★★★★★★★★★★★★★★...이 끝나면 음음음음음음음음음음음 then thented then then then then then then then then로 됩니다.true를 하고 있습니다.최근 업데이트 빌드를 출력하고 있습니다.undefined마이크로소프트는 아직 결정을 못 내렸어요!

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

더 이상 출력하지 .window.opera ★★★★★★★★★★★★★★★★★.window.chrome새로운 Opera 30에서 true로 출력합니다.따라서 OPR이 userAgent에 있는지 확인해야 합니다.Opera 30에서는 Google Chrome과 동일한 렌더링 엔진을 사용하기 때문에 이 새로운 변경에 대응하기 위해 위의 조건을 업데이트했습니다.

2015년 10월 13일 업데이트 - IE 점검을 위한 추가

Edge를 .true★★★★★★에window.chromeIE11을 출력하는 undefined★★★★★★에window.chrome이 사실을 알려준 기교 있는 해커!

2016년 2월 5일 업데이트 - iOS Chrome 체크 추가

Check iOS Chrome 체크 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★CriOS에, 「」를 출력하고 있습니다.trueiOS에서 크롬을 사용할 수 있습니다.알려주신 분들께 감사드립니다!

업데이트 2018년 4월 18일 - Opera 체크 변경

Opera, window.oprundefined은 제66이 되었습니다.OPRwindow.navigator.vendorFrosty Z와 Daniel Wallman의 신고에 감사드립니다!

업데이트: 이 문제를 해결하기 위한 최신 방법은 Jonathan의 답변을 참조하십시오.다음 답변은 여전히 작동할 수 있지만 다른 브라우저에서 잘못된 긍정이 트리거될 수 있습니다.

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

단, 앞서 설명한 바와 같이 사용자 에이전트는 스푸핑될 수 있으므로 이러한 문제를 처리할 때는 항상 기능 검출(예: Modernizer)을 사용하는 것이 좋습니다.

Chrome의 렌더링 엔진(Google Chrome 또는 Chromium의 특정 기능이 아님)을 감지하려면 다음과 같은 간단한 옵션이 있습니다.

var isChrome = !!window.chrome;

메모: Chrome 기반의 Edge, Opera 등의 많은 버전에서도 반환됩니다(@Carm이 지적해 주셔서 감사합니다).이를 회피하는 것은 계속적인 싸움입니다( 참조).window.opr따라서 렌더링 엔진(2020년에 거의 모든 주요 최신 브라우저에 사용됨) 또는 기타 크롬(또는 크롬?) 고유의 기능을 감지하려고 하는지 자문해 보십시오.

그리고 당신은 아마도 건너뛸 수 있다.

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

console.log(JSON.stringify({
  isAndroid: /Android/.test(navigator.userAgent),
  isCordova: !!window.cordova,
  isEdge: /Edge/.test(navigator.userAgent),
  isFirefox: /Firefox/.test(navigator.userAgent),
  isChrome: /Google Inc/.test(navigator.vendor),
  isChromeIOS: /CriOS/.test(navigator.userAgent),
  isChromiumBased: !!window.chrome && !/Edge/.test(navigator.userAgent),
  isIE: /Trident/.test(navigator.userAgent),
  isIOS: /(iPhone|iPad|iPod)/.test(navigator.platform),
  isOpera: /OPR/.test(navigator.userAgent),
  isSafari: /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent),
  isTouchScreen: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
  isWebComponentsSupported: 'registerElement' in document && 'import' in document.createElement('link') && 'content' in document.createElement('template')
}, null, '  '));

Chrome 89(2021년 3월) 시점에서는 이전 답변은 모두 폐기되었습니다.Chrome은 이제 사용자 에이전트 힌트를 지원합니다.이 작업은 다음 방법으로 수행해야 합니다.

navigator.userAgentData?.brands?.some(b => b.brand === 'Google Chrome')

또는 Babel을 사용하지 않는 경우:

navigator.userAgentData && navigator.userAgentData.brands && navigator.userAgentData.brands.some(b => b.brand === 'Google Chrome')

이 값은 Chrome 89 이상에서는 true, 최신 Opera 및 Edge에서는 false, userAgentData를 지원하지 않는 브라우저에서는 정의되지 않았습니다.

is_vares /varesnavigator ~ var is_vares = /discs/.test(navigator.userAgent.toLowerCase();
전에 2022년8월)은 12년 전입니다.

---

업데이트(2022년 8월):

현재 사용자 에이전트(사용자 에이전트 스니핑)를 사용한 브라우저 검출은 일반적으로 좋지 않습니다.기능검출이 최선의 방법이어야 합니다.

레퍼런스: 사용자 에이전트를 사용한 브라우저 검출

단, 그래도 그렇게 하고 싶다면 다음과 같은 서드파티 라이브러리를 사용하십시오.

var parser = new UAParser();
var result = parser.getResult();

console.log(result.browser);// {name: "Chrome", version: "104.0.0.0", "major": "104"}
console.log(result.device); // {model: undefined, type: undefined, vendor: undefined}
console.log(result.os);     // {name: "Windows", version: "10"}
console.log(result.engine); // {name: "Blink", version: "104.0.0.0"}
console.log(result.cpu);    // {"architecture": "amd64"}

<script 
  src="https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/1.0.2/ua-parser.min.js">
</script>

위 스니펫은 라이브러리 ua-parser-js를 사용합니다.

1. CDN - https://cdnjs.com/libraries/UAParser.js
2. npm - https://www.npmjs.com/package/ua-parser-js

추신: UA 스니핑은 나쁜 관행이며 가능한 한 기능 검출을 사용합니다.

다음을 사용할 수 있습니다.

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

v.71로 동작하고 있습니다.

만약 당신이 용감하다고 느낀다면, 당신은 브라우저 스니핑을 실험해보고 버전을 얻을 수 있다.

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

이 탐지된 버전은 Chrome 버전 또는 Edge 버전일 수 있습니다.단, 브라우저 플러그인은 userAgent 및 플랫폼 등을 쉽게 변경할 수 있으므로 권장하지 않습니다.

빅 레보스키가 내 안에서 그의 대답을 사용한 것에 대해 사과한다.

브라우저 탐지를 수행할 때 사용할 수 있는 몇 가지 선택적 창 속성이 있습니다.그 중 하나는 옵션입니다.chromeproperty(Chromium와 다른 인 "Chromium()'입니다.opr(오페라)

의 「」가 있는 .chrome크롬이전에는 대부분의 경우 Chrome을 의미했지만 요즘은 Chromium(엣지 및 Opera 포함)을 기반으로 하는 브라우저가 많기 때문에 속성을 확인하는 것만으로 Chrome 브라우저를 특정할 수 없습니다.

또한 다양한 브라우저 버전(Edg 또는 Edge) 또는 운영 체제(EdgiOS, ChriOS 및 FxiOS)에 대해 여러 사용자 에이전트가 존재하는 경우가 많습니다.

다음 논리를 사용하여 많은 케이스(일반 사용자 에이전트)에 대해 테스트했습니다.

const GOOGLE_VENDOR_NAME = 'Google Inc.';

function isOpera(){
  return Boolean(window.opr);
}

function isChromium() {
  return Boolean(window.chrome);
}

function getBrowserName() {
  const userAgent = window.navigator.userAgent;
  const vendor = window.navigator.vendor;
  switch (true) {
    case /Edge|Edg|EdgiOS/.test(userAgent):
      return 'Edge';
    case /OPR|Opera/.test(userAgent) && isOpera():
      return 'Opera';
    case /CriOS/.test(userAgent):
    case /Chrome/.test(userAgent) && vendor === GOOGLE_VENDOR_NAME && isChromium():
      return 'Chrome';
    case /Vivaldi/.test(userAgent):
      return 'Vivaldi';
    case /YaBrowser/.test(userAgent):
      return 'Yandex';
    case /Firefox|FxiOS/.test(userAgent):
      return 'Firefox';
    case /Safari/.test(userAgent):
      return 'Safari';
    case /MSIE|Trident/.test(userAgent):
      return 'Internet Explorer';
    default:
      return 'Unknown';
  }
}

function isChrome() {
  const name = getBrowserName();
  return name === 'Chrome';
}

이 바이올린에는 다음과 같은 간단한 코드가 있습니다.

크롬(Edge, Opera)이 아닌 다른 브라우저와 먼저 비교해 보는 것이 요령이다.스위치 내의 이러한 모든 경우 브라우저의 다른 ID가 하나의 정규 표현으로 조합되어 사용자 에이전트 문자열에 대해 테스트됩니다.Chrome 및 Opera의 경우 Windows 속성에 대한 추가 테스트가 추가되었으며 Chrome의 경우 벤더 이름이 예상 값과 일치하는지 여부도 확인합니다.

---

주의: 다양한 사용자 에이전트를 대상으로 테스트를 실시했지만, 이 솔루션이 완벽하다고는 할 수 없습니다.이 코드를 더욱 개선할 수 있도록 개선하거나 브라우저 탐지에 실패하는 어떠한 제안도움이 됩니다.

---

갱신:

Chrome on iOS(크롬 온 iOS)의 Chrome에는 iOS의 Chrome이되어 있지 않습니다.★chrome: true사용자 에이전트 문자열의 존재 여부만 테스트해야 합니다.

브라우저가 Google Chrome인지 확인하려면:

var isChrome = navigator.userAgent.includes("Chrome") && navigator.vendor.includes("Google Inc");

console.log(navigator.vendor);
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36 "

console.log(navigator.userAgent); 
// "Google Inc."

사용자가 사용자 에이전트를 변경할 수 있습니다.「 」의 .webkit ( 「」)style of의 .body에 의존하다

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

Mac의 Chrome에서 사용할 수 있습니다.위의 모든 기능보다 심플하거나 신뢰성이 높은 것 같습니다(userAgent 문자열이 테스트된 경우).

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

다양한 데스크톱 브라우저(Firefox, IE, Opera, Edge, Chrome)의 이름을 알아봅니다.Safari 제외.

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)

여기 요지와 여기 바이올린을 보세요.

원래 코드 조각이 크롬에서는 작동하지 않아 어디서 찾았는지 잊어버렸습니다.이전에는 사파리가 있었지만, 지금은 사파리에 접속할 수 없기 때문에 확인할 수 없습니다.

파이어폭스와 IE 코드만이 원래의 스니펫의 일부였습니다.

오페라 엣지 크롬userAgent에 . OPR오페라에만 존재합니다. Edge엣지크롬

Firefox와 IE에 대해서는 설명할 수 없습니다.

쓰는 패키지에 이 기능을 추가합니다.

대부분의 브라우저에서 true 또는 false를 제공하는 최선의 해결책은 다음과 같습니다.

var isChrome = (navigator.userAgent.indexOf("Chrome") != -1 && navigator.vendor.indexOf("Google Inc") != -1)

「」를 사용합니다..indexOf.includes이치노코드 브라우저 고유의 코드를 만드는 것이 포인트(또는 그 이유)이지만, 대부분의 (또는 모든) 브라우저에서 동작하기 위해서는 조건이 필요합니다.

체크해 주세요.Safari, Chrome, IE, Firefox 및 Opera 브라우저를 검색하는 방법

고객님의 경우:

var isChrome = (window.chrome.webstore || window.chrome.runtime) && !!window.chrome;

var is_chrome = browseris.chrome

또는 브라우저를 확인합니다.

browseris.firefox
browseris.ie
browseris.safari

는 '올소하다'와 같은 을 확인할 수 있습니다.browseris.chrome7up기타 등등.

'flashis' 개체의 기존 정보를 모두 확인합니다.

모든 답이 틀렸다."Opera"와 "Chrome"는 모든 경우에 동일합니다.

(주문 부분)

여기 정답이 있다

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

언급URL : https://stackoverflow.com/questions/4565112/javascript-how-to-find-out-if-the-user-browser-is-chrome