254

ブラウザがChromeかどうかを確認するために、ブール値を返す関数が必要です。

そのような機能を作成するにはどうすればよいですか？

4

18 に答える 18

350

ブラウザがGoogleChromeであるかどうかを確認するには、次のことを試してください。

// 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 
}

使用例：http：//codepen.io/jonathan/pen/WpQELR

これが機能する理由は、Google Chromeインスペクターを使用して、[コンソール]タブに移動する場合です。'window'と入力し、Enterキーを押します。次に、「ウィンドウオブジェクト」のDOMプロパティを表示できます。オブジェクトを折りたたむと、「chrome」プロパティを含むすべてのプロパティを表示できます。

IEのチェックインに厳密に等しいtrueを使用することはできなくなりましたwindow.chrome。IEは以前はを返していましundefinedたが、現在はを返しますtrue。しかし、推測すると、IE11は再び未定義を返します。""IE11は、の空の文字列も返しますwindow.navigator.vendor。

これがお役に立てば幸いです。

アップデート：

以下に指摘してくれたHalcyon991に感謝します。新しいOpera18+も。に対してtrueを出力しますwindow.chrome。Opera18はChromium31に基づいているようです。window.navigator.vendorそこで、 is："Google Inc"とnotがであることを確認するためのチェックを追加しました"Opera Software ASA"。また、 RingとAdrien Beのおかげで、Chrome33がtrueを返さなくなったことを知らせてくれました... window.chromenullでないかどうかをチェックするようになりました。しかし、IE11に細心の注意を払ってください。最初にリリースされたときと同じようにundefined、IE11が出力するようになったので、チェックを追加しましたundefined。その後、いくつかの更新ビルドの後、出力されtrueました。最近の更新ビルドがundefined再び出力されます。マイクロソフトはそれを決心することはできません！

2015年7月24日更新-Operaチェックの追加

Opera30がリリースされました。を出力しなくなりましwindow.operaた。またwindow.chrome、新しいOpera 30ではtrueに出力されます。したがって、OPRがuserAgentにあるかどうかを確認する必要があります。上記の条件を更新して、Opera 30でのこの新しい変更を考慮しました。これは、Opera30がGoogleChromeと同じレンダリングエンジンを使用しているためです。

2015年10月13日更新-IEチェックの追加

trueIE11は..を出力しますが、..を出力するためwindow.chrome、IEEdgeのチェックを追加しましundefinedたwindow.chrome。これについて知らせてくれたartfulhackerに感謝します！

2016年2月5日更新-iOSChromeチェックの追加

CriOSiOSでChromeに出力するため、 iOSChromeチェックのチェックを追加しましtrueた。これについて知らせてくれたxinthoseに感謝します！

2018年4月18日更新-Operaチェックの変更

Operaのチェックを編集しましたが、Chrome66がになっているのでチェックwindow.oprはありません。これを報告してくれたFrostyZとDanielWallmanに感謝します！undefinedOPRwindow.navigator.vendor

于 2012-11-12T17:38:53.197 に答える
225

更新：これを処理するための更新された方法については、ジョナサンの回答を参照してください。以下の答えはまだ機能する可能性がありますが、他のブラウザで誤検知を引き起こす可能性があります。

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

ただし、前述のように、ユーザーエージェントはスプーフィングされる可能性があるため、他の回答で言及されているように、これらの問題を処理するときは常に機能検出（たとえば、 Modernizer ）を使用するのが最善です。

于 2010-12-30T18:17:05.627 に答える
20

さらに短い：var is_chrome = /chrome/i.test( navigator.userAgent );

于 2012-05-09T13:57:06.823 に答える
20

Chromeのレンダリングエンジンを検出したい場合（Google ChromeやChromiumの特定の機能ではない）、簡単なオプションは次のとおりです。

var isChrome = !!window.chrome;

注：これはtrue、Chromeに基づくEdge、Operaなどの多くのバージョンでも返されます（これを指摘してくれた@Carrmに感謝します）。これを回避することは継続的な戦いであるため（以下をwindow.opr参照）、レンダリングエンジン（2020年にほとんどすべての主要な最新ブラウザーで使用された）またはその他のChrome（またはChromium？）固有の機能を検出しようとしているかどうかを自問する必要があります。

そして、あなたはおそらくスキップすることができます!!

于 2013-12-05T10:47:41.840 に答える
14 

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, '  '));

于 2017-01-19T16:49:05.103 に答える
8

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をサポートしていないブラウザではundefinedを返します。

于 2021-05-09T10:45:59.627 に答える
7 
var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() );
于 2010-12-30T18:43:35.377 に答える
3

勇気がある場合は、ブラウザのスニッフィングを試してバージョンを入手できます。

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

この検出されたバージョンは、Chromeバージョン、Edgeバージョン、またはその他のものである可能性があります。ただし、ブラウザプラグインは、userAgentやプラットフォームなどを簡単に変更できるため、これはお勧めしません。

私の中で彼の答えを使用してくれたビッグレボウスキーに謝罪します。

于 2012-08-07T19:00:58.117 に答える
3

次を使用できます。

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

v.71に取り組んでいます

于 2018-12-07T14:30:48.400 に答える
1

ブラウザがGoogleChromeかどうかを確認するには：

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."
于 2020-10-21T18:05:25.457 に答える
1

ブラウザの検出を行うときに使用できるオプションのウィンドウプロパティがいくつかあります。1つはオプションのchromeプロパティ（Chromium）で、もう1つはオプションのoprプロパティ（Opera）です。

ブラウザがWindowオブジェクトにオプションのchromeプロパティを持っている場合、それはブラウザがChromiumブラウザであることを意味します。以前はほとんどの場合これはChromeを意味していましたが、最近では多くのブラウザがChromium（Edgeや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';
}

この簡略化されたコードは、このフィドルにあります。

秘訣は、最初に他のブラウザ、次にChrome（Edge、Opera）に対してテストすることです。これらすべての場合、スイッチでは、ブラウザーのさまざまな可能な識別子が1つの正規表現に結合され、ユーザーエージェント文字列に対してテストされます。ChromeとOperaの場合、windowプロパティの追加テストが追加され、Chromeの場合、ベンダー名が期待値と一致するかどうかも確認されます。

注： 私は多くの異なるユーザーエージェントに対してテストしましたが、このソリューションが完璧であるとはここでは主張しません。このコードをさらに改善できるように、改善のための提案やブラウザの検出の失敗を歓迎します。

アップデート：

iOS上のChrome（ユーザーエージェントCriOS）の検出に関するバグを修正しました。iOS上のChromeにchrome: trueはウィンドウオブジェクトのプロパティがないため、ユーザーエージェント文字列の存在についてのみテストする必要があります。

于 2021-04-08T18:25:55.220 に答える
0

ユーザーはユーザーエージェントを変更できます。要素のオブジェクトのwebkitプレフィックス付きプロパティをテストしてみてくださいstylebody

if ("webkitAppearance" in document.body.style) {
  // do stuff
}
于 2015-10-26T16:06:52.277 に答える
0

MacのChromeで動作します。上記のすべてよりも単純であるか、信頼性が高いようです（userAgent文字列がテストされた場合）。

        var isChrome = false;
        if (window.chrome && !window.opr){
            isChrome = true;
        }
        console.log(isChrome);
于 2019-02-28T12:53:35.787 に答える
0

さまざまなデスクトップブラウザ（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)

ここで要点を、ここでフィドルを見る

元のコードスニペットはChromeで機能しなくなり、どこで見つけたか忘れてしまいました。以前はサファリがありましたが、サファリにアクセスできなくなったため、確認できなくなりました。

FirefoxとIEのコードのみが元のスニペットの一部でした。

Opera、Edge、Chromeのチェックは簡単です。userAgentに違いがあります。OPROperaにのみ存在します。EdgeEdgeにのみ存在します。したがって、Chromeをチェックするには、これらの文字列が存在しないようにする必要があります。

FirefoxとIEについては、何をしているのか説明できません。

私が書いているパッケージにこの機能を追加します

于 2019-03-06T04:04:55.733 に答える
0

私が見つけた最良の解決策は、ほとんどのブラウザでtrueまたはfalseのいずれかを示します。

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

.indexOf代わりに使用.includesすると、ブラウザとの互換性が高まります。全体のポイントはコードをブラウザー固有にすることですが、ほとんどの（またはすべての）ブラウザーで機能するための条件が必要です。

于 2021-04-19T16:19:03.207 に答える
-1

これを確認してください：Safari、Chrome、IE、Firefox、Operaブラウザを検出する方法は？

あなたの場合：

var isChrome = (window.chrome.webstore || window.chrome.runtime) && !!window.chrome;
于 2019-01-08T12:35:41.573 に答える
-2 
var is_chrome = browseris.chrome

またはブラウザを確認してください。

browseris.firefox
browseris.ie
browseris.safari

とolsoのようなバージョンを確認することができますbrowseris.chrome7up。

'browseris'オブジェクトの既存の情報をすべて確認してください

于 2020-10-27T10:49:56.753 に答える
-4

すべての答えは間違っています。「Opera」と「Chrome」はすべての場合で同じです。

（編集部）

これが正しい答えです

if (window.chrome && window.chrome.webstore) {
    // this is Chrome
}
于 2015-05-07T13:15:20.403 に答える